Yuika/partials/post-background.hbs

{{!--
Wow what the hell is going on in here even?

Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
be a background image using CSS, we end up with a handful of inline styles.

If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
        with a `no-image` class so we can style it accordingly.
        --}}
        <div>
            <div class="post-card__image">
                {{#if feature_image}}
                <img class="post-card__image-inner" srcset="{{img_url feature_image size="s"}} 300w, {{img_url
                    feature_image size="m" }} 600w" sizes="(max-width: 768px) 100vw, 35vw"
                    src="{{img_url feature_image size="m"}}" alt="{{title}}" loading="lazy">
                {{else}}
                <img class="post-card__image-inner" srcset="{{img_url @site.cover_image size="s"}} 300w, {{img_url
                    @site.cover_image size="m" }} 600w" sizes="(max-width: 768px) 100vw, 35vw"
                    src="{{img_url @site.cover_image size="m"}}" alt="{{title}}" loading="lazy">
                {{/if}}
            </div>
        </div>