hugoWebsite/layouts/_default/single.html

{{define "main"}}
<article>
  <header class="mb-4 bg-indigo-600">
    <span class="py-96">
      <h1 class="py-16 text-5xl font-black text-center text-white capitalize">
        {{ .Title }}
      </h1>
    </span>
  </header>
  <div class="max-w-4xl mx-auto mt-8 mb-2">
    <div class="px-6">
      {{ with .Params.featured_image }}
      {{ with resources.Get . }}
      {{ $small := (.Resize "400x webp q80").RelPermalink }}
      {{ $medium := (.Resize "550x webp q80").RelPermalink }}
      {{ $large := (.Resize "900x webp q80").RelPermalink }}
      {{ $featuredimage := (.Resize "1500x webp q80").RelPermalink }}
      <img src="{{ $featuredimage }}" srcset="
        {{- with $small -}}, {{.}} 400w{{- end -}}
        {{- with $medium -}}, {{.}} 550w{{- end -}}
        {{- with $large -}}, {{.}} 768w{{- end -}}
        {{- with $featuredimage -}}, {{.}} 1100w{{- end -}}"
           class="object-fill overflow-hidden rounded-lg shadow-lg ring-4 ring-zinc-300/40 dark:ring-gray-900/40 shadow-neutral-100/20 dark:shadow-neutral-800/40"
           width="100%" alt="{{ .Params.title }}" />
      {{ end }}
      {{ end }}
    </div>
  </div>
  <!-- " {{.Content}}" pulls from the markdown content of the corresponding _index.md -->
  <div class="max-w-2xl px-6 pt-6 pb-16 mx-auto prose dark:prose-invert dark:text-white">
    {{.Content}}
  </div>
</article>
{{end}}