post.hbs

{{!< default}}

{{#post}}

<article id="post" class="{{post_class}}">

    <header class="w-full h-[100vw] [@media(min-aspect-ratio:7/10)]:h-[70vh]">
      <a href="{{img_url feature_image size="xl"}}" class="w-full h-full">
        <img
          srcset="
          {{img_url feature_image size="xxs"}} 30w,
          {{img_url feature_image size="xs"}} 100w,
          {{img_url feature_image size="s"}} 300w,
          {{img_url feature_image size="m"}} 600w,
          {{img_url feature_image size="l"}} 1200w,
          {{img_url feature_image size="xl"}} 2000w"
          sizes="(min-width: 2000px) 2000px, 90vw"
          src="{{img_url feature_image}}"
          alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
          class="lightbox-image w-full h-full object-contain"
        >
      </a>
    </header>

    <div class="px-4 md:px-0 prose max-w-full default-grid">

      <div class="my-4 mt-8 default-grid-item">
        <h1 class="m-0 text-5xl">{{title}}</h1>
        {{#if custom_excerpt}}
          <h2 class="m-0">{{custom_excerpt}}</h2>
        {{/if}}
        <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
      </div>

      <div class="post-content col-start-1 col-end-6 default-grid">
        {{content}}
      </div>

      <footer class="default-grid-item">
        <div>
          Posted by {{#foreach authors}}<a href="{{url}}">{{name}}</a>{{/foreach}}
        </div>

        {{#if comments}}
          <section class="mt-8 pt-6 border-t">
            {{comments}}
          </section>
        {{/if}}
      </footer>
    </div>
</article>

{{/post}}