steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Color "skins" (#1242)

Browse Source 
* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close #1208
This commit is contained in:
Michael Rose
2017-09-12 12:01:43 -04:00
committed by GitHub
parent d67aa113c8
commit 93c4fbc4b9
86 changed files with 1395 additions and 985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
docs/_docs/05-configuration.md
View File

@@ -2,7 +2,7 @@
title: "Configuration"
permalink: /docs/configuration/
excerpt: "Settings for configuring and customizing the theme."
last_modified_at: 2017-09-05T12:06:30-04:00
last_modified_at: 2017-09-12T10:38:09-04:00
---
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.
@@ -24,6 +24,71 @@ If you're using the Ruby gem version of the theme you'll need this line to activ
theme: minimal-mistakes-jekyll
```
### Skin
Easily change the color scheme of the theme using one of the provided "skins":
```yaml
minimal_mistakes_skin : "default" # "air", "contrast", "dark", "dirt", "mint", "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.
{: .notice--warning}
#### Air skin: `air`
{:.no_toc}
<figure class="half">
<a href="{{ site.baseurl }}/assets/images/air-skin-archive-large.png"><img src="{{ site.baseurl }}/assets/images/air-skin-archive.png"></a>
<a href="{{ site.baseurl }}/assets/images/air-skin-post-large.png"><img src="{{ site.baseurl }}/assets/images/air-skin-post.png"></a>
<figcaption>Calm and blue.</figcaption>
</figure>
#### Contrast skin: `contrast`
{:.no_toc}
<figure class="half">
<a href="{{ site.baseurl }}/assets/images/contrast-skin-archive-large.png"><img src="{{ site.baseurl }}/assets/images/contrast-skin-archive.png"></a>
<a href="{{ site.baseurl }}/assets/images/contrast-skin-post-large.png"><img src="{{ site.baseurl }}/assets/images/contrast-skin-post.png"></a>
<figcaption>Retro feel with bold blue links and inverted footer.</figcaption>
</figure>
#### Dark skin: `dark`
{:.no_toc}
<figure class="half">
<a href="{{ site.baseurl }}/assets/images/dark-skin-archive-large.png"><img src="{{ site.baseurl }}/assets/images/dark-skin-archive.png"></a>
<a href="{{ site.baseurl }}/assets/images/dark-skin-post-large.png"><img src="{{ site.baseurl }}/assets/images/dark-skin-post.png"></a>
<figcaption>Inverted palette, white text on a dark background.</figcaption>
</figure>
#### Dirt skin: `dirt`
{:.no_toc}
<figure class="half">
<a href="{{ site.baseurl }}/assets/images/dirt-skin-archive-large.png"><img src="{{ site.baseurl }}/assets/images/dirt-skin-archive.png"></a>
<a href="{{ site.baseurl }}/assets/images/dirt-skin-post-large.png"><img src="{{ site.baseurl }}/assets/images/dirt-skin-post.png"></a>
<figcaption>Earthy tones.</figcaption>
</figure>
#### Mint skin: `mint`
{:.no_toc}
<figure class="half">
<a href="{{ site.baseurl }}/assets/images/mint-skin-archive-large.png"><img src="{{ site.baseurl }}/assets/images/mint-skin-archive.png"></a>
<a href="{{ site.baseurl }}/assets/images/mint-skin-post-large.png"><img src="{{ site.baseurl }}/assets/images/mint-skin-post.png"></a>
<figcaption>Minty fresh green.</figcaption>
</figure>
#### Sunrise skin: `sunrise`
{:.no_toc}
<figure class="half">
<a href="{{ site.baseurl }}/assets/images/sunrise-skin-archive-large.png"><img src="{{ site.baseurl }}/assets/images/sunrise-skin-archive.png"></a>
<a href="{{ site.baseurl }}/assets/images/sunrise-skin-post-large.png"><img src="{{ site.baseurl }}/assets/images/sunrise-skin-post.png"></a>
<figcaption>Oranges and red.</figcaption>
</figure>
### Site Locale
`site.locale` is used to declare the primary language for each web page within the site.

27
docs/_docs/15-utility-classes.md
View File

@@ -2,7 +2,7 @@
title: "Utility Classes"
permalink: /docs/utility-classes/
excerpt: "CSS classes for aligning text/image, styling buttons and notices, and more."
last_modified_at: 2016-11-03T11:32:25-04:00
last_modified_at: 2017-09-01T11:54:44-04:00
---
{% include toc icon="gears" title="Utility Classes" %}
@@ -108,15 +108,16 @@ The image above should extend outside of the parent container on right.
## Buttons
Make any link standout more when applying the `.btn` class.
Make any link standout more when applying the `.btn .btn--primary` classes.
```html
<a href="#" class="btn">Link Text</a>
<a href="#" class="btn btn--primary">Link Text</a>
```
| Button Type | Example | Class | Kramdown |
| ------ | ------- | ----- | ------- |
| Default | [Text](#link){: .btn} | `.btn` | `[Text](#link){: .btn}` |
| Primary | [Text](#link){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary}` |
| Success | [Text](#link){: .btn .btn--success} | `.btn .btn--success` | `[Text](#link){: .btn .btn--success}` |
| Warning | [Text](#link){: .btn .btn--warning} | `.btn .btn--warning` | `[Text](#link){: .btn .btn--warning}` |
| Danger | [Text](#link){: .btn .btn--danger} | `.btn .btn--danger` | `[Text](#link){: .btn .btn--danger}` |
@@ -126,10 +127,10 @@ Make any link standout more when applying the `.btn` class.
| Button Size | Example | Class | Kramdown |
| ----------- | ------- | ----- | -------- |
| X-Large | [X-Large Button](#){: .btn .btn--x-large} | `.btn .btn--x-large` | `[Text](#link){: .btn .btn--x-large}` |
| Large | [Large Button](#){: .btn .btn--large} | `.btn .btn--large` | `[Text](#link){: .btn .btn--large}` |
| Default | [Default Button](#){: .btn} | `.btn` | `[Text](#link){: .btn}` |
| Small | [Small Button](#){: .btn .btn--small} | `.btn .btn--small` | `[Text](#link){: .btn .btn--small}` |
| X-Large | [X-Large Button](#){: .btn .btn--primary .btn--x-large} | `.btn .btn--primary .btn--x-large` | `[Text](#link){: .btn .btn--primary .btn--x-large}` |
| Large | [Large Button](#){: .btn .btn--primary .btn--large} | `.btn .btn--primary .btn--large` | `[Text](#link){: .btn .btn--primary .btn--large}` |
| Default | [Default Button](#){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary }` |
| Small | [Small Button](#){: .btn .btn--primary .btn--small} | `.btn .btn--primary .btn--small` | `[Text](#link){: .btn .btn--primary .btn--small}` |
## Notices
@@ -144,22 +145,22 @@ Call attention to a block of text.
| Success | `.notice--success` |
| Danger | `.notice--danger` |
**Watch out!** This paragraph of text has been emphasized with the `{: .notice}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice}` class.
{: .notice}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--primary}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--primary}` class.
{: .notice--primary}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--info}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--info}` class.
{: .notice--info}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--warning}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--warning}` class.
{: .notice--warning}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--success}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--success}` class.
{: .notice--success}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--danger}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--danger}` class.
{: .notice--danger}
{% capture notice-text %}

10
docs/_docs/18-history.md
View File

@@ -4,7 +4,7 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar:
nav: docs
last_modified_at: 2017-09-12T08:44:28-04:00
last_modified_at: 2017-09-12T08:49:12-04:00
---
## Unreleased
@@ -13,6 +13,10 @@ last_modified_at: 2017-09-12T08:44:28-04:00
- Test strict Front Matter in `/test` site. [#1236](https://github.com/mmistakes/minimal-mistakes/pull/1236)
- Rename `gems` key to `plugins`. [#1239](https://github.com/mmistakes/minimal-mistakes/pull/1239)
- Add [YIQ Color Contrast](https://github.com/easy-designs/yiq-color-contrast) mixin for determining lightness of a color.
- DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
- Add `btn--primary` button class. **Note:** elements that were previously using only a `.btn` class will now also need `.btn--primary` (eg. `<a class="btn btn--primary" href="#">my link</a>`).
- Add `air`, `contrast`, `dark`, `dirt`, `mint`, and `sunrise` skin color options. [#1208](https://github.com/mmistakes/minimal-mistakes/issues/1208)
## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)
@@ -29,8 +33,6 @@ last_modified_at: 2017-09-12T08:44:28-04:00
- Add note to configuration documentation about Cloudflare minification as an alternative to `layout: compress`. [#1217](https://github.com/mmistakes/minimal-mistakes/pull/1217)
- Show 4 latest posts in "You May Also Enjoy" module when `related: true` and no related posts are found due to `lsi` ([latent semantic indexing](https://en.wikipedia.org/wiki/Latent_semantic_analysis#Latent_semantic_indexing)) being disabled on GitHub Pages. [#554](https://github.com/mmistakes/minimal-mistakes/issues/554)
- Truncate archive item titles' that overflow with an ellipsis. [#1213](https://github.com/mmistakes/minimal-mistakes/issues/1213)
- Test strict Front Matter in `/test` site. [#1236](https://github.com/mmistakes/minimal-mistakes/pull/1236)
- Rename `gems` key to `plugins`. [#1239](https://github.com/mmistakes/minimal-mistakes/pull/1239)
### Bug Fixes
@@ -38,7 +40,7 @@ last_modified_at: 2017-09-12T08:44:28-04:00
- Reduce amount of blank pages when printing in Chrome. [#1196](https://github.com/mmistakes/minimal-mistakes/issues/1196)
- Remove `#disqus_thread` duplicate from `comments-providers/disqus.html` as it is already in `comments.html` include. [#1199](https://github.com/mmistakes/minimal-mistakes/issues/1199)
- Fix Liquid syntax errors in `tag-list.html` and `category-list.html` includes by removing parenthesis in `assign`s. [#1223](https://github.com/mmistakes/minimal-mistakes/issues/1223)
- Fix Liquid syntax error: "Expected id but found open_square in {% raw %}`"{{page.[include.id] }}"`"{% endraw %} in `gallery` and `feature_row` includes.
- Fix Liquid syntax error: "Expected id but found open_square in {% raw %}`"{{ page.[include.id] }}"`"{% endraw %} in `gallery` and `feature_row` includes.
- Fix Liquid syntax error: "Expected end_of_string but found pipe in `"name in __names | sort"`" in `group-by-array` include.
## [4.5.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.1)