{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
<article class="prose dark:prose-invert max-w-full">
  <div class="relative">
    <div class="absolute inset-x-0 bottom-0 h-1/2"></div>
    <div class="mx-auto max-w-7xl p-0">
      <div class="relative sm:overflow-hidden">
        <div class="fixed inset-x-0 top-0 -z-10">
          {{ $useDefault := true }}
          {{ $homepageImage := "" }}
          {{ with .Site.Params.defaultBackgroundImage }}
            {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
              {{ $homepageImage = resources.GetRemote . }}
            {{ else }}
              {{ $homepageImage = resources.Get . }}
            {{ end }}
          {{ end }}
          {{ with .Site.Params.homepage.homepageImage }}
            {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
              {{ $homepageImage = resources.GetRemote . }}
              {{ $useDefault = false }}
            {{ else }}
              {{ $homepageImage = resources.Get . }}
              {{ $useDefault = false }}
            {{ end }}
          {{ end }}
          {{ if $homepageImage }}
            {{ $style := "" }}
            {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
            {{ with $.Params.imagePosition | default $defaultPosition }}
              {{ $style = printf "object-position: %s;" . }}
            {{ end }}
            <img
              id="background-image"
              class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
              src="{{ $homepageImage.RelPermalink }}"
              role="presentation"
              {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
            <div
              class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
            <div
              class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-neutral-100 opacity-60 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800"></div>
          {{ end }}
        </div>
        <div class="relative flex flex-col items-center justify-center px-1 py-1 text-center">
          {{ with .Site.Params.Author.image }}
            {{ $authorImage := "" }}
            {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
              {{ $authorImage = resources.GetRemote . }}
            {{ else }}
              {{ $authorImage = resources.Get . }}
            {{ end }}
            {{ if $authorImage }}
              {{ $final := $authorImage }}
              {{ $squareImage := $authorImage }}
              {{ if not (or $disableImageOptimization (eq $authorImage.MediaType.SubType "svg")) }}
                {{ $final = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
                {{ $shortSide := int (math.Min $authorImage.Width $authorImage.Height) }}
                {{ $squareImage = $authorImage.Crop (printf "%dx%d" $shortSide $shortSide ) }}
              {{ end }}
              <img
                class="mb-2 h-36 w-36 rounded-full"
                width="144"
                height="144"
                alt="{{ $.Site.Params.Author.name | default `Author` }}"
                src="{{ $final.RelPermalink }}"
                data-zoom-src="{{ $squareImage.RelPermalink }}">
            {{ end }}
          {{ end }}
          <h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
            {{ .Site.Params.Author.name | default .Site.Title }}
          </h1>
          {{ with .Site.Params.Author.headline }}
            <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
              {{ . | markdownify }}
            </h2>
          {{ end }}
          <div class="mt-3 mb-10 text-2xl">
            {{ with .Site.Params.Author.links }}
              <div class="flex flex-wrap">
                {{ range $links := . }}
                  {{ range $name, $url := $links }}
                    <a
                      class="hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
                      href="{{ $url }}"
                      target="_blank"
                      aria-label="{{ $name | title }}"
                      title="{{ $name | title }}"
                      rel="me noopener noreferrer">
                      {{ partial "icon.html" $name }}
                    </a>
                  {{ end }}
                {{ end }}
              </div>
            {{ end }}
          </div>
          <section class="prose dark:prose-invert w-full">{{ .Content }}</section>
        </div>
      </div>
    </div>
  </div>
</article>
<section>
  {{ partial "recent-articles/main.html" . }}
</section>
{{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
  <div
    id="background-blur"
    class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-xl bg-neutral-100/75 dark:bg-neutral-800/60"></div>
  {{ $backgroundBlur := resources.Get "js/background-blur.js" }}
  {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
  <script
    type="text/javascript"
    src="{{ $backgroundBlur.RelPermalink }}"
    integrity="{{ $backgroundBlur.Data.Integrity }}"
    data-blur-id="background-blur"
    data-image-id="background-image"
    {{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
{{ end }}