<!DOCTYPE html>
<html lang="en">
  <head>
    {% metagen
        title=title + ' - Sebin\'s Blog',
        desc=description,
        url=url + page.url,
        twitter_card_type=twitter.cardType,
        twitter_handle=twitter.account,
        name=author.name,
        generator='eleventy'
    %}
    {% ogImage "og-image.og.njk", { title: title } %}
    {% if mastodon.fediverseCreator %}
      <meta name="fediverse:creator" content="{{ mastodon.fediverseCreator }}" />
    {% endif %}
    <link rel="alternate" href="/feed.xml" type="application/atom+xml">
    <link rel="stylesheet" href="{{ '/fonts/tilt-warp/tilt-warp.css' | url }}">
    <link rel="stylesheet" href="{{ '/fonts/encode-sans/encode-sans.css' | url }}">
    <link rel="stylesheet" href="{{ '/fonts/m-plus-1-code/m-plus-1-code.css' | url }}">
    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
    <link rel="stylesheet" href="{{ '/css/prism.css' | url }}">
    <link rel="me" href="https://meow.social/@SebinNyshkim">
  </head>
  <body class="h-dvh bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
    <header>
      <div class="mx-auto max-w-screen-xl sm:px-safe-offset-4 md:px-safe-offset-6">
        <nav class="eleventy-navigation flex min-h-16 items-center justify-center bg-sky-600 shadow-xl sm:m-4 sm:mx-auto sm:justify-between sm:rounded-xl dark:bg-sky-950">
          <div class="hidden sm:flex sm:items-center">
            <img src="/img/sebin.png" alt="it me" class="m-4 max-w-14 rounded-full border-4 shadow-2xl">
            <h1 class="text-3xl text-white">Sebin's Blog</h1>
          </div>
          {{
            collections.all |
            eleventyNavigation |
            eleventyNavigationToHtml({
              listClass: "nav-list",
              anchorClass: "nav-link",
              activeAnchorClass: "active",
              activeKey: eleventyNavigation.key or page.url.split('/')[1]
            }) |
            safe
          }}
        </nav>
      </div>
    </header>

    <main class="mb-20 space-y-10 pt-10 *:px-safe-offset-4 sm:mb-32 sm:pt-16 md:mb-40 md:pt-20">
      {{ content | safe }}
    </main>

    <footer class="pb-16">
      <div class="mx-auto max-w-screen-xl divide-y divide-slate-400 px-safe-offset-4 md:px-safe-offset-6 dark:divide-slate-600">
        <div class="flex flex-wrap gap-6 md:flex-nowrap md:gap-0"></div>
        <div class="mt-16 flex justify-between gap-4 pt-10">
          <div>
            <p>&copy; {% year %} Sebin Nyshkim</p>
            <p>Content licensed under
              <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
            </p>
          </div>
          <div class="text-right">
            <p>Made with <a href="https://11ty.dev">11ty</a></p>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>
