From 586224fc7a7eeb8217c9105d7fb95a67fad8a37c Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Mon, 18 Oct 2021 14:36:36 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Add=20colour=20scheme=20docs=20w?= =?UTF-8?q?ith=20preview=20swatches?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/docs/advanced-customisation.md | 4 +-- exampleSite/content/docs/configuration.md | 2 +- exampleSite/content/docs/getting-started.md | 34 +++++++++++++++++++ exampleSite/content/docs/installation.md | 2 +- exampleSite/layouts/shortcodes/swatches.html | 14 ++++++++ 5 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 exampleSite/layouts/shortcodes/swatches.html diff --git a/exampleSite/content/docs/advanced-customisation.md b/exampleSite/content/docs/advanced-customisation.md index ec5a1cf2..73d00c22 100644 --- a/exampleSite/content/docs/advanced-customisation.md +++ b/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 `.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 `.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. diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index 3f7fcb3e..e92e1252 100644 --- a/exampleSite/content/docs/configuration.md +++ b/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 |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.| diff --git a/exampleSite/content/docs/getting-started.md b/exampleSite/content/docs/getting-started.md index 487b326b..18b7b7f7 100644 --- a/exampleSite/content/docs/getting-started.md +++ b/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. diff --git a/exampleSite/content/docs/installation.md b/exampleSite/content/docs/installation.md index c5ac0959..b376c09e 100644 --- a/exampleSite/content/docs/installation.md +++ b/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. diff --git a/exampleSite/layouts/shortcodes/swatches.html b/exampleSite/layouts/shortcodes/swatches.html new file mode 100644 index 00000000..322db53e --- /dev/null +++ b/exampleSite/layouts/shortcodes/swatches.html @@ -0,0 +1,14 @@ +
+ + + +