index.hbs

{{!< 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"}}
            {{#match @custom.header_section_layout "=" "Large background"}}
                {{#if @site.cover_image}}
                    <img class="gh-about-image" 
                        srcset="{{img_url @site.cover_image size="s"}} 300w,
                            {{img_url @site.cover_image size="m"}} 720w,
                            {{img_url @site.cover_image size="l"}} 960w,
                            {{img_url @site.cover_image size="xl"}} 1200w,
                            {{img_url @site.cover_image size="xxl"}} 2000w"
                        sizes="100vw"
                        src="{{@site.cover_image}}" alt="{{@site.title}}">
                {{/if}}
            {{else}}
                {{#if @site.cover_image}}
                    <img class="gh-about-image" 
                        srcset="{{img_url @site.cover_image size="s"}} 300w,
                            {{img_url @site.cover_image size="m"}} 720w"
                        sizes="(max-width: 720px) 100vw, 50vw"
                        src="{{@site.cover_image}}" alt="{{@site.title}}">
                {{/if}}                
            {{/match}}
        {{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}}