Custom Author Box in Dawn Theme?

[jannis]

Here you go

Desktop:

And mobile:

The modifications:

In the partials/content.hbs I have modified the div with class single-footer-middle to this, adding the author name and bio:

        <div class="single-footer-middle">
        {{#if @custom.show_author}}
            <div class="single-footer-top">
                <h3 class="single-footer-title">Published by:</h3>
                <div class="author-list">
                    {{#foreach authors}}
                    <div class="author-image-placeholder u-placeholder square">
                        <a href="{{url}}" title="{{name}}">
                            <img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
                        </a>
                    </div>
                    <div class="author-meta-info">
                        <h4 class="author-name">
                            <a href="{{url}}" title="{{name}}">{{name}}</a>
                        </h4>
                        <span class="author-bio">{{bio}}</span>
                    </div>
                    {{/foreach}}
                </div>
            </div>
        {{/if}}
        </div>

Additionally, I have added this CSS via a code injection directly in the Ghost settings:

        <style>
            .author-list {
                display: flex; 
                flex-direction: row; 
                justify-content: flex-start; 
                align-items: flex-start; 
                gap: 2rem; 
                padding: 0 2rem;
            }

            .author-image-placeholder.u-placeholder.square {
                width: 8rem; 
                height: 8rem;
            }

            .author-meta-info {
                flex-grow: 1;
            }

            @media (max-width: 768px) {  
                .author-list {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
            }
        </style>

Hope this achieves what you were looking for