author.hbs

{{!< default}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template
    --}} <div class="site-header-content author-content container outer{{#match @custom.header_style " Left aligned"}}
    left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden" }}
    no-content{{/match}}{{/unless}}">

    {{#if @custom.show_publication_cover}}
    {{#if @site.cover_image}}
    {{!-- This is a responsive image, it loads different sizes depending on device
    https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
    <img class="site-header-cover" srcset="{{img_url @site.cover_image size=" s"}} 300w, {{img_url @site.cover_image
        size="m" }} 600w, {{img_url @site.cover_image size="l" }} 1000w, {{img_url @site.cover_image size="xl" }} 2000w"
        sizes="100vw" src="{{img_url @site.cover_image size=" xl"}}" alt="{{@site.title}}" />
    {{/if}}
    {{#author}}
    {{!-- <header class="post-card-header tag-card-header">
        <a href="/" class="back-link"><img src="{{asset " images/left-arrow.svg"}}" alt="arrow">Back to all posts</a>
        <h2 class="post-card-title tag-title">Posts tagged <span class="post-tag-title">#{{name}}</span></h2>
    </header> --}}
    <header class="post-card-header author-card-header">
        {{#if profile_image}}
        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
        {{/if}}
        <h2 class="post-card-title author-title">Posts by <span>{{name}}</span></h2>
        <a href="/" class="back-link"><img src="{{asset "images/left-arrow.svg"}}" alt="arrow">Back to all posts</a>
    </header>
    {{/author}}
    {{/if}}



    </div>

    <main id="site-main" class="site-main outer">
        <div class="container posts">

            <div class="post-feed">

                {{#author}}
                <section class="author post-card post-card-large">

                    {{#if cover_image}}
                    <div class="post-card-image-link">
                        {{!-- This is a responsive image, it loads different sizes depending on device
                        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433
                        --}}
                        <img class="post-card-image" srcset="{{img_url cover_image size=" s"}} 300w, {{img_url
                            cover_image size="m" }} 600w, {{img_url cover_image size="l" }} 1000w, {{img_url cover_image
                            size="xl" }} 2000w" sizes="(max-width: 1000px) 400px, 800px"
                            src="{{img_url cover_image size=" m"}}" alt="{{title}}" />
                    </div>
                    {{/if}}

                    {{!-- <div class="post-card-content">
                        <div class="post-card-content-link">


                            {{#if bio}}
                            <div class="post-card-excerpt">{{bio}}</div>
                            {{/if}}

                            <footer class="author-profile-footer">
                                {{#if location}}
                                <div class="author-profile-location">{{location}}</div>
                                {{/if}}
                                <div class="author-profile-meta">
                                    {{#if website}}
                                    <a class="author-profile-social-link" href="{{website}}" target="_blank"
                                        rel="noopener">{{website}}</a>
                                    {{/if}}
                                    {{#if twitter}}
                                    <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank"
                                        rel="noopener">{{> "icons/twitter"}}</a>
                                    {{/if}}
                                    {{#if facebook}}
                                    <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank"
                                        rel="noopener">{{> "icons/facebook"}}</a>
                                    {{/if}}
                                </div>
                            </footer>

                        </div>
                    </div> --}}

                </section>
                {{/author}}

                {{#foreach posts}}
                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}
                {{/foreach}}

            </div>

            {{pagination}}

            {{> newsletter }}

        </div>
    </main>