diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a20ed48..61e9d6ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# Changelog
+## Unreleased
+
+### Documentation
+
+- Rewrite skin previews on `05-configuration.md` in Liquid template.
+
## [4.25.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.25.1)
### Bug Fixes
diff --git a/docs/_docs/05-configuration.md b/docs/_docs/05-configuration.md
index c8b6ffb7..df8b95ee 100644
--- a/docs/_docs/05-configuration.md
+++ b/docs/_docs/05-configuration.md
@@ -4,6 +4,26 @@ permalink: /docs/configuration/
excerpt: "Settings for configuring and customizing the theme."
last_modified_at: 2021-05-11T10:40:42-04:00
toc: true
+
+skins:
+ - name: air
+ description: Calm and blue.
+ - name: aqua
+ description: Just like water.
+ - name: contrast
+ description: Retro feel with bold blue links and inverted footer.
+ - name: dark
+ description: Inverted palette, white text on a dark background.
+ - name: dirt
+ description: Earthy tones.
+ - name: mint
+ description: Minty fresh green.
+ - name: neon
+ description: Inverted palette, white text on a dark background.
+ - name: plum
+ description: Purple reigns supreme.
+ - name: sunrise
+ description: Oranges and red.
---
Settings that affect your entire site can be changed in [Jekyll's configuration file](https://jekyllrb.com/docs/configuration/): `_config.yml`, found in the root of your project. If you don't have this file you'll need to copy or create one using the theme's [default `_config.yml`](https://github.com/mmistakes/minimal-mistakes/blob/master/_config.yml) as a base.
@@ -31,90 +51,35 @@ Easily change the color scheme of the theme using one of the provided "skins":
minimal_mistakes_skin: "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
```
-**Note:** If you have made edits to the theme's CSS files be sure to update [`/assets/css/main.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss) to include `@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin` before the `minimal-mistakes` import.
+**Note:** If you have made edits to the theme's CSS files be sure to update [`/assets/css/main.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss) to include {% raw %}`@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin`{% endraw %} before the `minimal-mistakes` import.
{: .notice--warning}
-#### Air skin: `air`
-
+{% for skin in page.skins %}
+#### {{ skin.name | capitalize }} skin: `{{ skin.name }}`
{:.no_toc}
-
-
- Calm and blue.
-
-
-#### Aqua skin: `aqua`
-
-
-
-
- Just like water.
-
-
-#### Contrast skin: `contrast`
-
-
-
-
- Retro feel with bold blue links and inverted footer.
-
-
-#### Dark skin: `dark`
-
-
-
-
- Inverted palette, white text on a dark background.
-
-
-#### Dirt skin: `dirt`
-
-
-
-
- Earthy tones.
-
-
-#### Mint skin: `mint`
-
-{:.no_toc}
-
-
-
-
- Minty fresh green.
-
-
-#### Neon skin: `neon`
-
-
-
-
- Inverted palette, white text on a dark background.
-
-
-#### Neon skin: `plum`
-
-
-
-
- Purple reigns supreme.
-
-
-#### Sunrise skin: `sunrise`
-
-
-
-
- Oranges and red.
+
+
+
+
+
+
+ {{ skin.description }}
+{% endfor %}
### Site locale
`site.locale` is used to declare the primary language for each web page within the site.
-_Example:_ `locale: "en-US"` sets the `lang` attribute for the site to the _United States_ flavor of English, while `en-GB` would be for the `United Kingdom` style of English. Country codes are optional and the shorter variation `locale: "en"` is also acceptable. To find your language and country codes check this [reference table]().
+_Example:_ `locale: "en-US"` sets the `lang` attribute for the site to the _United States_ flavor of English, while `en-GB` would be for the _United Kingdom_ style of English. Country codes are optional and the shorter variation `locale: "en"` is also acceptable. To find your language and country codes check this [reference table]().
Properly setting the locale is important for associating localized text found in the [**UI Text**]({{ "/docs/ui-text/" | relative_url }}) data file. An improper match will cause parts of the UI to disappear (eg. button labels, section headings, etc).
@@ -131,7 +96,7 @@ You also have the option of customizing the separation character used in SEO-fri
_Example:_ `title_separator: "|"` would produce page titles like `Sample Page | My Awesome Site`.
-**Note:** Long site titles have been known to break the masthead layout. Avoid adding a long "tagline" to the title prevent this from happening eg. `My Awesome Site is the Best Because I Say So`.
+**Note:** Long site titles have been known to break the masthead layout. Avoid adding a long "tagline" to the title to prevent this from happening, e.g. `My Awesome Site is the Best Because I Say So`.
{: .notice--warning}
### Site subtitle
@@ -157,7 +122,7 @@ _Example:_ `description: "A flexible Jekyll theme for your blog or site with a m
### Site URL
-The base hostname and protocol for your site. If you're hosting with GitHub Pages this will be something like `url: "https://mmistakes.github.io"` or `url: "https://mademistakes.com"` if you have a custom domain name.
+The base hostname and protocol for your site. If you're hosting on GitHub Pages this will be something like `url: "https://mmistakes.github.io"` or `url: "https://mademistakes.com"` if you have a custom domain name.
GitHub Pages now [forces `https://` for new sites](https://help.github.com/articles/securing-your-github-pages-site-with-https/) so be mindful of that when setting your URL to avoid mixed-content warnings.
@@ -183,9 +148,9 @@ Add your repository name with organization to your site's configuration file, `_
repository: "username/repo-name"
```
-"NWO" stands for "name with owner." It is GitHub lingo for the username of the owner of the repository plus a forward slash plus the name of the repository, e.g. `mmistakes/minimal-mistakes`, where **mmistakes** is the owner and **minimal-mistakes** is the repository name.
+"NWO" stands for "**n**ame **w**ith **o**wner." It is GitHub lingo for the username of the owner of the repository plus a forward slash plus the name of the repository, e.g. `mmistakes/minimal-mistakes`, where **mmistakes** is the owner and **minimal-mistakes** is the repository name.
-Your `site.github.*` fields should fill in like normal. If you run Jekyll with the --verbose flag, you should be able to see all the API calls made.
+Your `site.github.*` fields should be filled in like normal. If you run Jekyll with the `--verbose` flag, you should be able to see all the API calls made.
If you don't set `repository` correctly you may see the following error when trying to `serve` or `build` your Jekyll site:
diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
index d7826725..51001057 100644
--- a/docs/_docs/18-history.md
+++ b/docs/_docs/18-history.md
@@ -5,7 +5,7 @@ permalink: "/docs/history/"
excerpt: Change log of enhancements and bug fixes made to the theme.
sidebar:
nav: docs
-last_modified_at: '2024-04-28T01:12:00+08:00'
+last_modified_at: '2024-05-04T23:32:02+08:00'
toc: false
---
@@ -15,6 +15,12 @@ toc: false
-->
{% raw %}
+## Unreleased
+
+### Documentation
+
+- Rewrite skin previews on `05-configuration.md` in Liquid template.
+
## [4.25.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.25.1)
### Bug Fixes