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

Allow custom gradient in page header overlays (#2806)

Browse Source 
* Allow custom gradient in page header overlays

* Update documentation

* Update CHANGELOG and history
This commit is contained in:
iBug
2021-02-06 09:24:25 +08:00
committed by GitHub
parent d585934803
commit 5fe4c4810d
5 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/_docs/10-layouts.md
View File

@ -428,7 +428,7 @@ To overlay text on top of a header image you have a few more options:
| Name | Description | Default |
| ---- | ----------- | ------- |
| **overlay_image** | Header image you'd like to overlay. Same rules as `header.image` from above. | |
| **overlay_filter** | Color/opacity to overlay on top of the header image eg: `0.5` or `rgba(255, 0, 0, 0.5)`. |
| **overlay_filter** | Color/opacity to overlay on top of the header image. Example: `0.5`, `rgba(255, 0, 0, 0.5)` or [`linear-gradient`][mdn-linear-gradient]. |
| **show_overlay_excerpt** | Display excerpt in the overlay text | true |
| **excerpt** | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
| **tagline** | Overrides page excerpt. Useful when header text needs to be different from excerpt in archive views. | |
@ -436,6 +436,8 @@ To overlay text on top of a header image you have a few more options:
| **cta_label** | Deprecated, use `actions` instead. Call to action button text label. | `more_label` in UI Text data file |
| **cta_url** | Deprecated, use `actions` instead. Call to action button URL. | |
[mdn-linear-gradient]: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()
With this YAML Front Matter:
```yaml
@ -477,7 +479,7 @@ header:
url: "https://github.com"
```
Or if you want to do more fancy things, go full rgba:
Or if you feel colorful, use full rgba:
![transparent red overlay]({{ "/assets/images/mm-header-overlay-red-filter.jpg" | relative_url }})
@ -492,6 +494,21 @@ header:
url: "https://github.com"
```
Or if you want to do more fancy things, go all the way to [linear-gradient][mdn-linear-gradient]:
![transparent custom overlay]({{ "/assets/images/mm-header-overlay-custom-filter.jpg" | relative_url }})
```yaml
excerpt: "This post should [...]"
header:
overlay_image: /assets/images/unsplash-image-1.jpg
overlay_filter: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 255, 255, 0.5))
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
actions:
- label: "Download"
url: "https://github.com"
```
Multiple call to action button links can be assigned like this:
```yaml

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

@ -25,6 +25,7 @@ toc: false
- Update Indonesian localized UI text strings. [#2731](https://github.com/mmistakes/minimal-mistakes/pull/2731)]
- Update remote theme documentation. [#2734](https://github.com/mmistakes/minimal-mistakes/pull/2734)
- Update allejo/jekyll-toc to v1.1.0, skip headings without an ID. [#2752](https://github.com/mmistakes/minimal-mistakes/pull/2752)
- Allow custom gradient for page header overlay. [#2806](https://github.com/mmistakes/minimal-mistakes/pull/2806)
## [4.21.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.21.0)