{% 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>