godo-template-photographer.hbs

{{!-- Layout --}}
{{!< default}}

{{!-- Publication Cover - partials/home/publication-cover.hbs --}}
{{> "home/publication-cover"}}

<div class="photographer pb-vmin8">
    <div class="js-feed-entry grid md:grid-cols-2 lg:grid-cols-3">
        {{#foreach posts}}
        <article class="js-story relative story-cover min-h-lg{{#unless feature_image}} bg-dark{{/unless}}">

            {{!-- Featured Media - partials/components/media-cover.hbs --}}
            <a href="{{url}}" class="story-cover-thumbnail overflow-hidden block">
                {{> "components/media-cover" background=feature_image has_gradient=true alt_title=title}}
            </a>

            <header class="absolute bottom-0 left-0 right-0 text-white px-4 py-10">
                {{!-- Primary Tag- partials/components/primary-tag.hbs --}}
                {{#if primary_tag}}<div class="mb-4">{{> "components/primary-tag" class="relative z-3"}}</div>{{/if}}

                <h2 class="text-4xl font-semibold leading-tight mb-4"><a class="relative z-3" href="{{url}}">{{title}}</a></h2>

                {{!-- Author - Primary Tag - Datetime - Read time - ./partials/components/author-meta.hbs --}}
                {{> "components/author-meta"}}
            </header>

        </article>
        {{/foreach}}
    </div>

    {{!-- Pagination - partials/pagination.hbs --}}
    {{pagination}}
</div>

{{#contentFor "header"}}<style>.godo-f-story{height:100vh}.story-cover-thumbnail{padding-top:90%}.story-cover-thumbnail .simply-cover-gradient{transition:background-color .5s ease-in-out;background-color:transparent;background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.9)),color-stop(60%,rgba(255,255,255,0)));background-image:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(255,255,255,0) 60%)}.story-cover:hover .story-cover-thumbnail .simply-cover-gradient{background-color:rgba(0,0,0,.55)}.hh-author-name a:hover{color:#fff}@media only screen and (min-width: 766px){.story-cover-thumbnail{padding-top:125%}}</style>{{/contentFor}}