First Attempt to Support Art Direction Mobile First Images on Minimal Mistakes Jekyll Theme

minimal-mistakes-responsive-snippet-page__hero.html

<!-- Process the Hero Image -->

{% if page.header.overlay_image_mob %} 
  {% if page.header.overlay_image_mob
    contains "://" %} 
    {% capture overlay_img_mob_path %}{{ page.header.overlay_image }}{% endcapture %} 
  {% elsif page.header.overlay_image_mob %} 
    {% capture overlay_img_mob_path %}{{ page.header.overlay_image_mob | relative_url }}{% endcapture %} 
  {% endif %}
{% else %}
  {% capture overlay_img_mob_path %}{{ overlay_img_path }}{% endcapture %} 
{% endif %}

<!-- Mobile First Responsive Web Design for Hero -->

<style>
  /* Kick-in the larger landscape hero only when needed. */
  @media screen and (min-width: 768px) {
    .page__hero--overlay {
      {% 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 }}) !important; /* Not sure why need to force this. */
      {% endif %}
    }
  }
  /* Default to mobile (art direction) version if provided. */
  .page__hero--overlay {
  {% if page.header.overlay_color %}
    background-color: {{ page.header.overlay_color | default: 'transparent' }};
  {% endif %}
  {% if overlay_img_mob_path %}
    background-image: {% if overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}),
    {% endif %}url('{{ overlay_img_mob_path }}');
  {% endif %}
  }
</style>