{{ define "main" }}
<div class="mx-auto bg-white p-4 sm:p-10 pt-8 sm:pt-16 rounded-lg shadow-xl sm:max-w-7xl">
  <div class="mb-6 sm:mb-10 text-center">
    <h1 class="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-black">{{ .Title }}</h1>
    <div class="text-base sm:text-lg md:text-2xl">
      {{  .Date | time.Format ":date_long" }}
    </div>  
  </div>
  <div class="bg-gray-400 h-[1px] mb-4 sm:mb-8"></div>
  <div class="content prose prose-sm sm:prose-lg lg:prose-xl max-w-none prose-a:text-blue-800 prose-a:no-underline hover:prose-a:text-blue-600 hover:prose-a:underline">
    {{ .Content }}
  </div>
</div>

<button class="m-4 sm:m-8 p-2 sm:p-3 rounded-full bg-gray-200 hover:ring-2 hover:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" onclick="window.history.back()">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
  </svg>
</button>

{{ end }}

