{{!< default}}

<section class="gh-about gh-outer{{#match @custom.header_section_layout "!=" "Typographic profile"}}{{#unless @site.cover_image}} no-image{{/unless}}{{else}}{{#unless @site.icon}} no-image{{/unless}}{{/match}}">
    <div class="gh-about-inner gh-inner">
        {{#match @custom.header_section_layout "!=" "Typographic profile"}}
            {{#if @site.cover_image}}
                <img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
            {{/if}}
        {{else}}
            {{#if @site.icon}}
                <img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}">
            {{/if}}
        {{/match}}
        <script>
            (function () {
                if (!document.body.classList.contains('has-background-about')) return;

                const about = document.querySelector('.gh-about');
                if (!about) return;

                const image = about.querySelector('.gh-about-image');

                about.style.setProperty('--about-height', image.clientWidth * image.naturalHeight / image.naturalWidth + 'px');
                about.classList.add('initialized');
            })();
        </script>
        <div class="gh-about-content">
            <div class="gh-about-content-inner">
                {{#if @custom.primary_header}}
                    <h1 class="gh-about-primary">{{{@custom.primary_header}}}</h1>
                {{/if}}
                {{#if @custom.secondary_header}}
                    <p class="gh-about-secondary">{{{@custom.secondary_header}}}</p>
                {{/if}}
                {{#if @site.members_enabled}}
                    {{#unless @member}}
                        <div class="gh-subscribe-input" data-portal>
                            jamie@example.com
                            <span class="gh-btn gh-primary-btn">Subscribe</span>
                        </div>
                    {{/unless}}
                {{/if}}
            </div>
        </div>
    </div>
</section>

<main class="gh-main gh-outer">
    <div class="gh-feed gh-inner">
        {{#foreach posts}}
            {{> "loop"}}
        {{/foreach}}
    </div>
</main>

{{#contentFor "body_class"}}{{#match @custom.header_section_layout "Side by side"}} has-side-about{{/match}}{{#match @custom.header_section_layout "Large background"}}{{#if @site.cover_image}} is-head-transparent has-background-about{{else}} has-side-about{{/if}}{{/match}}{{#match @custom.header_section_layout "Typographic profile"}}{{#if @site.icon}} has-typographic-about{{else}} has-side-about{{/if}}{{/match}}{{/contentFor}}