Yuika/author.hbs

{{!< default}}
{{#author}}
{{> "site-header"}}
<div class="relative group index-header">
  {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
    <div class="w-full h-full opacity-50 bg-black">
    </div>
  </div>
  <div class="absolute bottom-0 py-6 h-full left-0 right-0">
   <div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
    <div class="my-2">
      <p class="bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm">Author</p>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-col items-begin mr-4">
        {{#if profile_image}}
        <div class="my-2">
          <img class="rounded-full h-16" src="{{profile_image}}" alt="{{name}}" />
        </div>
        {{/if}}
      </div>
      <div class="flex flex-col items-begin my-2">
        <div>
          <h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>
        </div>
        <div class="text-white">
          {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
        </div>
        <div class="text-white">
          {{#if website}}
          <span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
          {{/if}}
          {{#if twitter}}
          <span class=""><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
          {{/if}}
          {{#if facebook}}
          <span class=""><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
          {{/if}}
         </div>
       </div>
    </div>
    <div class="text-white">
      {{#if bio}}
      <p>{{bio}}</p>
      {{/if}}
    </div>
   </div>
  </div>
</div>
{{/author}}

<div class="flex flex-wrap justify-start post-feed content w-full px-4">
  {{#foreach posts}}
    {{> "post-card"}}
  {{/foreach}}
</div>