<!DOCTYPE html>
<html lang="en-US" class="h-full">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>{{ page.title }} - {{ site.title }}</title>
    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
  </head>
  <body class="h-full">
    <header class="bg-livingstone-500 p-5 h-32 hover:h-56 transition-all duration-500 w-full fixed group">
      <h1 class="text-center text-5xl text-white p-7 font-bevan">David Livingstone</h1>
      <ul class="flex place-content-center place-items-center p-8 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:duration-1000">
        <li><a href="/" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Home</a></li>
        <li><a href="/blog" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Blog</a></li>
        <li><a href="/about" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">About</a></li>
      </ul>
    </header>
    <div class="flex p-16"></div>
    <main class="inline-block min-h-[83.333333%]">
      <h1 class="text-center font-mplus2 text-4xl p-5">{{page.title}}</h1>
      <h3 class="text-center font-baskerville text-xl p-5">By {{page.author}}</h3>
      <article class="mx-10 mb-10 text-black font-baskerville *:my-3 *:indent-8">
        {{content}}
      </article>
      <h3 class="text-center font-baskerville p-5">Published on {{page.date | date: "%A, %B %e, %Y"}}</h3>
    </main>
  </body>
  <footer class="h-1/3 min-h-60 bg-livingstone-100 flex flex-col place-content-center">
    <h1 class="px-10 py-3 text-white text-lg font-bevan">David Livingstone</h1>
    <ul class="flex place-content-start place-items-center px-5">
      <li><a href="/" class="text-white font-mplus2 mx-5 hover:underline">Home</a></li>
      <li><a href="/blog" class="text-white font-mplus2 mx-5 hover:underline">Blog</a></li>
      <li><a href="/about" class="text-white font-mplus2 mx-5 hover:underline">About</a></li>
    </ul><br />
    <h2 class="px-10 py-3 text-white font-mplus2">&copy;2024-2025 David Jentes</h2>
    <h2 class="px-10 py-3 text-white font-mplus2">Designed for the 2025 Cumberland Valley Regional Student Convention</h2>
  </footer>
  <script>
    var refTagger={settings:{bibleVersion:"KJV",customStyle:{heading:{fontFamily:"M PLUS 2"},body:{fontFamily:"Libre Baskerville"}}}};!function(e,n){var r=e.querySelector("[nonce]");refTagger.settings.nonce=r&&(r.nonce||r.getAttribute("nonce"));var t=e.createElement(n),g=e.getElementsByTagName(n)[0];t.src="https://api.reftagger.com/v2/RefTagger.js",t.nonce=refTagger.settings.nonce,g.parentNode.insertBefore(t,g)}(document,"script");
  </script>
</html>