From ffcec42472eda4e6ba7b5fad29406ec22748d1b9 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Tue, 17 Jan 2023 11:08:19 +1100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20new=20`cherry`=20and=20`sapph?= =?UTF-8?q?ire`=20colour=20schemes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + assets/css/schemes/cherry.css | 37 +++++++++++++++++++ assets/css/schemes/ocean.css | 2 +- assets/css/schemes/sapphire.css | 37 +++++++++++++++++++ exampleSite/config/_default/markup.toml | 2 +- .../content/docs/configuration/index.md | 2 +- .../content/docs/getting-started/index.md | 16 +++++++- 7 files changed, 92 insertions(+), 5 deletions(-) create mode 100644 assets/css/schemes/cherry.css create mode 100644 assets/css/schemes/sapphire.css diff --git a/CHANGELOG.md b/CHANGELOG.md index a0d8c47d..fe13a8a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Support for icons in menus including support for links styled as an icon by itself or an icon with text - Search link can now be fully customised and positioned anywhere in the menu - Front matter support for specifying article thumbnails, covers and featured image details (including filename pattern, alt text and caption) +- Two new colour schemes - `cherry` and `sapphire` - Support for SVG assets as article thumbnails, covers and featured images - Front matter keywords support on a per article basis - Indonesian translation ([#398](https://github.com/jpanther/congo/pull/398)) diff --git a/assets/css/schemes/cherry.css b/assets/css/schemes/cherry.css new file mode 100644 index 00000000..14567e6d --- /dev/null +++ b/assets/css/schemes/cherry.css @@ -0,0 +1,37 @@ +/* Cherry scheme */ +:root { + --color-neutral: 255, 255, 255; + /* Neutral */ + --color-neutral-50: 250, 250, 250; + --color-neutral-100: 245, 245, 245; + --color-neutral-200: 229, 229, 229; + --color-neutral-300: 212, 212, 212; + --color-neutral-400: 163, 163, 163; + --color-neutral-500: 115, 115, 115; + --color-neutral-600: 82, 82, 82; + --color-neutral-700: 64, 64, 64; + --color-neutral-800: 38, 38, 38; + --color-neutral-900: 23, 23, 23; + /* Rose */ + --color-primary-50: 255, 241, 242; + --color-primary-100: 255, 228, 230; + --color-primary-200: 254, 205, 211; + --color-primary-300: 253, 164, 175; + --color-primary-400: 251, 113, 133; + --color-primary-500: 244, 63, 94; + --color-primary-600: 225, 29, 72; + --color-primary-700: 190, 18, 60; + --color-primary-800: 159, 18, 57; + --color-primary-900: 136, 19, 55; + /* Green */ + --color-secondary-50: 240, 253, 244; + --color-secondary-100: 220, 252, 231; + --color-secondary-200: 187, 247, 208; + --color-secondary-300: 134, 239, 172; + --color-secondary-400: 74, 222, 128; + --color-secondary-500: 34, 197, 94; + --color-secondary-600: 22, 163, 74; + --color-secondary-700: 21, 128, 61; + --color-secondary-800: 22, 101, 52; + --color-secondary-900: 20, 83, 45; +} diff --git a/assets/css/schemes/ocean.css b/assets/css/schemes/ocean.css index cc6d2d6d..1644570d 100644 --- a/assets/css/schemes/ocean.css +++ b/assets/css/schemes/ocean.css @@ -1,7 +1,7 @@ /* Ocean scheme */ :root { --color-neutral: 255, 255, 255; - /* Gray */ + /* Slate */ --color-neutral-50: 248, 250, 252; --color-neutral-100: 241, 245, 249; --color-neutral-200: 226, 232, 240; diff --git a/assets/css/schemes/sapphire.css b/assets/css/schemes/sapphire.css new file mode 100644 index 00000000..fce9d916 --- /dev/null +++ b/assets/css/schemes/sapphire.css @@ -0,0 +1,37 @@ +/* Sapphire scheme */ +:root { + --color-neutral: 255, 255, 255; + /* Slate */ + --color-neutral-50: 248, 250, 252; + --color-neutral-100: 241, 245, 249; + --color-neutral-200: 226, 232, 240; + --color-neutral-300: 203, 213, 225; + --color-neutral-400: 148, 163, 184; + --color-neutral-500: 100, 116, 139; + --color-neutral-600: 71, 85, 105; + --color-neutral-700: 51, 65, 85; + --color-neutral-800: 30, 41, 59; + --color-neutral-900: 15, 23, 42; + /* Indigo */ + --color-primary-50: 238, 242, 255; + --color-primary-100: 224, 231, 255; + --color-primary-200: 199, 210, 254; + --color-primary-300: 165, 180, 252; + --color-primary-400: 129, 140, 248; + --color-primary-500: 99, 102, 241; + --color-primary-600: 79, 70, 229; + --color-primary-700: 67, 56, 202; + --color-primary-800: 55, 48, 163; + --color-primary-900: 49, 46, 129; + /* Pink */ + --color-secondary-50: 253, 242, 248; + --color-secondary-100: 252, 231, 243; + --color-secondary-200: 251, 207, 232; + --color-secondary-300: 249, 168, 212; + --color-secondary-400: 244, 114, 182; + --color-secondary-500: 236, 72, 153; + --color-secondary-600: 219, 39, 119; + --color-secondary-700: 190, 24, 93; + --color-secondary-800: 157, 23, 77; + --color-secondary-900: 131, 24, 67; +} diff --git a/exampleSite/config/_default/markup.toml b/exampleSite/config/_default/markup.toml index c5449fc3..d3b9437d 100644 --- a/exampleSite/config/_default/markup.toml +++ b/exampleSite/config/_default/markup.toml @@ -10,4 +10,4 @@ [tableOfContents] startLevel = 2 - endLevel = 4 + endLevel = 3 diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index 0f684d2a..f396d673 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/exampleSite/content/docs/configuration/index.md @@ -119,7 +119,7 @@ Many of the article defaults here can be overridden on a per article basis by sp |Name|Default|Description| |---|---|---| -|`colorScheme`|`"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.| +|`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `cherry`, `fire`, `ocean`, `sapphire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| |`defaultAppearance`|`"light"`|The default theme appearance, either `light` or `dark`.| |`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.| |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.| diff --git a/exampleSite/content/docs/getting-started/index.md b/exampleSite/content/docs/getting-started/index.md index 19b815bb..65243f34 100644 --- a/exampleSite/content/docs/getting-started/index.md +++ b/exampleSite/content/docs/getting-started/index.md @@ -30,7 +30,7 @@ The next step is to configure the language settings. Although Congo supports mul Locate the `languages.en.toml` file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to `languages.fr.toml`. {{< alert >}} -Note that the language code in the language config filename should match the `languageCode` setting in `config.toml`. +The language code in the language config filename should match the `languageCode` setting in `config.toml`. {{< /alert >}} ```toml @@ -54,7 +54,11 @@ If you need extra detail, further information about each of these configuration ## 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`. +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`, `cherry`, `fire`, `ocean`, `sapphire` and `slate`. + +{{< alert >}} +The `colourScheme` value should be provided in lowercase. +{{< /alert >}} ```toml # config/_default/params.toml @@ -72,6 +76,10 @@ Congo defines a three-colour palette that is used throughout the theme. Each mai {{< swatches "#78716c" "#84cc16" "#10b981" >}} +#### Cherry + +{{< swatches "#737373" "#f43f5e" "#22c55e" >}} + #### Fire {{< swatches "#78716c" "#f97316" "#f43f5e" >}} @@ -80,6 +88,10 @@ Congo defines a three-colour palette that is used throughout the theme. Each mai {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} +#### Sapphire + +{{< swatches "#64748b" "#6366f1" "#ec4899" >}} + #### Slate {{< swatches "#6B7280" "#64748b" "#6B7280" >}}