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

8
_includes/page__hero.html
View File

@@ -1,9 +1,13 @@
{% capture overlay_img_path %}{{ page.header.overlay_image | relative_url }}{% endcapture %}
{% if page.header.overlay_filter contains "rgba" %}
{% if page.header.overlay_filter contains "gradient" %}
{% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
{% elsif page.header.overlay_filter contains "rgba" %}
{% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
{% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %}
{% elsif page.header.overlay_filter %}
{% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %}
{% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %}
{% endif %}
{% if page.header.image_description %}
@@ -15,7 +19,7 @@
{% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %}
<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}), {% endif %}url('{{ overlay_img_path }}');{% endif %}"
style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}{{ overlay_filter }}, {% endif %}url('{{ overlay_img_path }}');{% endif %}"
>
{% if page.header.overlay_color or page.header.overlay_image %}
<div class="wrapper">