{{ define "header" }}

{{- partial "header-nav" . -}}

{{/* Hero Section */}}
<div class="text-white w-full">
  <div
    class="bg-no-repeat bg-cover bg-[position:70%] min-h-[30rem] md:pr-0 flex justify-center items-center bg-brand-blue">
    <div class="h-full flex flex-col justify-center items-center px-8 sm:p-6 text-left">
      <div class="max-w-[26rem]">
        <h1 class="text-7xl font-normal text-white text-center leading-[4rem] mx-auto uppercase">
          The university Online Blog</h1>
        <p class="text-2xl font-bold text-yellow text-center mx-auto uppercase tracking-[0.15rem]">
          Trending topics in the tu online community
        </p>
      </div>
      <div class="hidden flex flex-col justify-end items-start sm:items-end md:px-6 md:pl-32 md:pr-0">
      </div>
    </div>
  </div>
</div>
<div class="w-screen h-24 bg-accent flex flex-wrap items-center md:justify-between bg-[#EAF3FF]">
  <div
    class="blog-nav-container flex flex-wrap justify-center md:justify-between md:inline-flex items-center w-[1280px] mx-auto px-12 relative">
    <div class="inline-flex justify-between md:justify-start w-full md:w-auto gap-8 mb-4 md:mb-0">
      <a class="text-brand-blue" href="/blog/">
        Return to all articles
      </a>
    </div>
    <blog-search class="w-full md:w-[20rem]"></blog-search>
  </div>
</div>
{{ end }}

{{ define "main" }}

<article class="my-12">
  <h3 class="text-center pt-0">All <span class="text-brand-blue">{{.Data.Plural}}</span>
  </h3>
  {{.Content}}
  <div class="flex flex-col">
    {{ range .Pages }}
    <div class="self-center">
      <a class="font-body" href="{{ .Permalink }}">{{.Title}}</a>
    </div>
    {{ end }}
  </div>
</article>

{{ end }}