page-about.hbs

{{!< default}}

{{#post}}
<article class="post-content {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

    <header class="post-header">
        <h1 class="post-title">{{title}}</h1>
    </header>

    <div class="post-body">
        {{content}}
        <hr />
        <h6 class="follow">Elsewhere...</h6>
        <ul class="follow actions special">
            <li><a href="https://matthewrasnake.com/goodreads"><img src="https://images.matthewrasnake.com/social/goodreads_48x48.png" alt="GoodReads" /></a></li>
            <li><a href="https://matthewrasnake.com/bookbub"><img src="https://images.matthewrasnake.com/social/bookbub_48x48.png" alt="BookBub" /></a></li>
            <li><a href="https://matthewrasnake.com/facebook"><img src="https://images.matthewrasnake.com/social/facebook_48x48.png" alt="facebook" /></a></li>
            <li><a href="https://matthewrasnake.com/instagram"><img src="https://images.matthewrasnake.com/social/instagram_48x48.png" alt="Instagram" /></a></li>
        </ul>
    </div>

</article>
{{/post}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<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>
{{/contentFor}}