93 lines
2.8 KiB
HTML
93 lines
2.8 KiB
HTML
{% comment %}
|
|
|
|
Jekyll needs to process this file in order to append a correct image and add classes to post heading containers.
|
|
These classes get injected just before corresponding posts and are named after post-titles.
|
|
|
|
This solution relies on background-image, it's easier to make the background-image stretch to fill the container.
|
|
|
|
It also needs both :before and :after pseudoclasses to work, that's the only way to add webkit-filter and mix-blend-mode properties which only affect the background-image and not other elements in that div.
|
|
* :before - sets the background image to one set in post and adds a webkit-filter to it
|
|
* :after - adds an colored overlay on the image which you can also specify when creating post.
|
|
|
|
|
|
{% comment %}
|
|
{{ hero | prepend: site.baseurl }}'
|
|
{% endcomment %}
|
|
|
|
{% endcomment %}
|
|
|
|
{% if post.hero != nil %}
|
|
{% assign hero = post.hero %}
|
|
{% else %}
|
|
{% assign hero = site.hero.placeholder %}
|
|
{% endif %}
|
|
|
|
{% if post.overlay != nil %}
|
|
|
|
{% if post.overlay == "red" %}{% assign overlay = "rgba(255,0,100," %}{% endif %}
|
|
{% if post.overlay == "blue" %}{% assign overlay = "rgba(0,100,255," %}{% endif %}
|
|
{% if post.overlay == "green" %}{% assign overlay = "rgba(100,255,0," %}{% endif %}
|
|
{% if post.overlay == "purple" %}{% assign overlay = "rgba(100,0,255," %}{% endif %}
|
|
{% if post.overlay == "orange" %}{% assign overlay = "rgba(255,100,0," %}{% endif %}
|
|
|
|
{% else %}
|
|
{% assign overlay = "rgba(0,0,0,.8)" %}
|
|
{% endif %}
|
|
|
|
{% assign opacity = "0.8)" %}
|
|
|
|
|
|
<style>
|
|
.{{ post.url | remove: '/posts/' }} {
|
|
margin-bottom: 2em;
|
|
}
|
|
.{{ post.url | remove: '/posts/' }}::before {
|
|
background-image: url('{{ hero }}');
|
|
background-size: cover;
|
|
-webkit-filter: grayscale(1) brightness(0.5) contrast(0.5);
|
|
|
|
content:'';
|
|
position:absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -2;
|
|
}
|
|
.{{ post.url | remove: '/posts/' }}::after {
|
|
content:'';
|
|
position:absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
background-color: {{ overlay }}{{ opacity }};
|
|
|
|
/*mix-blend-mode: darken;
|
|
mix-blend-mode: color-burn;
|
|
mix-blend-mode: hard-light;*/
|
|
mix-blend-mode: overlay;
|
|
z-index: -1;
|
|
}
|
|
|
|
.{{ post.url | remove: '/posts/' }}-container,
|
|
.{{ post.url | remove: '/posts/' }}-container::before,
|
|
.{{ post.url | remove: '/posts/' }}-container::after {
|
|
height: 25rem;
|
|
}
|
|
|
|
.{{ post.url | remove: '/posts/' }}-bleed-container,
|
|
.{{ post.url | remove: '/posts/' }}-bleed-container::before,
|
|
.{{ post.url | remove: '/posts/' }}-bleed-container::after {
|
|
height: 35rem;
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.{{ post.url | remove: '/posts/' }}-container,
|
|
.{{ post.url | remove: '/posts/' }}-container::before,
|
|
.{{ post.url | remove: '/posts/' }}-container::after{
|
|
height: 20rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
}
|
|
</style>
|