page.hbs

{{!< default }}


{{#post}}

{{#if feature_image}}
<style type="text/css">
    .cover {
        background-image: url({{img_url feature_image size="s"}});
        background-image: -webkit-image-set(url({{img_url feature_image size="s"}}) 1x,
            url({{img_url feature_image size="l"}}) 2x);
        background-image: image-set(url({{img_url feature_image size="s"}}) 1x,
            url({{img_url feature_image size="l"}}) 2x);
    }

    @media(min-width: 768px) {
        .cover {
            background-image: url({{img_url feature_image size="l"}});
            background-image: -webkit-image-set(url({{img_url feature_image size="l"}}) 1x,
                url({{img_url feature_image size="xxl"}}) 2x);
            background-image: image-set(url({{img_url feature_image size="l"}}) 1x,
                url({{img_url feature_image size="xxl"}}) 2x);
        }
    }

    @media(min-width: 1024px) {
        .cover {
            background-image: url({{img_url feature_image size="xl"}});
            background-image: -webkit-image-set(url({{img_url feature_image size="xl"}}) 1x,
                url({{img_url feature_image size="3xl"}}) 2x);
            background-image: image-set(url({{img_url feature_image size="xl"}}) 1x,
                url({{img_url feature_image size="3xl"}}) 2x);
        }
    }

    @media(min-width: 1440px) {
        .cover {
            background-image: url({{img_url feature_image size="3xl"}});
        }
    }
</style>
{{/if}}

<section class="cover cover--post {{#if feature_image}}isCoverEnable {{else}}isCoverDisabled{{/if}}">

    {{> "cover/cover-page"}}

</section>

<main class='page-container' role='main'>
    <article class='page-wrapper u-content-center'>
        <section class='page'>
            {{content}}
        </section>
    </article>
</main>

{{#if @labs.members}}
<section class="subscription">
    {{> subscription/subscription }}
</section>
{{/if}}

{{/post}}

<script>
    var images = document.querySelectorAll('.kg-gallery-image img');
    images.forEach(function (image) {
        var container = image.closest('.kg-gallery-image');
        var width = image.attributes.width.value;
        var height = image.attributes.height.value;
        var ratio = width / height;
        container.style.flex = ratio + ' 1 0%';
    });
</script>