<!doctype html>
<html class="">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/x-icon" href="/favicon.png">
  <link href="/css/mini.css" rel="stylesheet">
  <title>$title$</title>
</head>

<script>
  // On page load or when changing themes, best to add inline in `head` to avoid FOUC
  function updateTheme() {
    if (
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }

  }
  updateTheme()
</script>

<body class="bg-white text-gray-900  min-h-screen
  dark:bg-gradient-to-br dark:from-slate-950 dark:to-black dark:text-white">
  <div class="container mx-auto ">
    <hr />
    $partial("templates/nav.html")$
    <hr />
    $body$
    <hr />
    $partial("templates/footer.html")$
  </div>
</body>

</html>