<!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" title="Sebin's Blog" 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="shortcut icon" href="/img/sebin.png" type="image/png">
    <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 class="absolute z-10 left-0 right-0 top-0 sm:px-safe-offset-4 md:px-safe-offset-6">
      <div class="flex min-h-16 max-w-screen-xl 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="" class="m-4 max-w-14 rounded-full border-4 shadow-2xl">
          <h1 class="text-3xl text-white">Sebin's Blog</h1>
        </div>
        <nav class="eleventy-navigation" aria-label="Main">
          {{
            collections.all |
            eleventyNavigation |
            eleventyNavigationToHtml({
              listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3",
              anchorClass: "rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800",
              activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800",
              activeKey: eleventyNavigation.key or page.url.split('/')[1]
            }) |
            safe
          }}
        </nav>
      </div>
    </header>

    <main class="mb-20 space-y-10 sm:mb-32 md:mb-40">
      {{ 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 flex-wrap justify-between gap-4 pt-10 sm:flex-nowrap">
          <div class="basis-full space-y-4">
            <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="basis-full space-y-4 sm:text-right">
            <p>Made with <a href="https://11ty.dev">11ty</a></p>
            <ul class="flex justify-end gap-4" aria-label="Connect">
              <li>
                <a
                  class="fill-slate-700 hover:fill-[#0285FF] dark:fill-slate-300"
                  href="https://bsky.app/profile/sebin-nyshkim.net"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Bluesky"
                >
                  {% icon "simple:bluesky", { width: 24, height: 24 } %}
                </a>
              </li>
              <li>
                <a
                  class="fill-slate-700 hover:fill-[#6364FF] dark:fill-slate-300"
                  href="https://meow.social/@SebinNyshkim"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Mastodon"
                >
                  {% icon "simple:mastodon", { width: 24, height: 24 } %}
                </a>
              </li>
              <li>
                <a
                  class="fill-slate-700 hover:fill-[#FFA500] dark:fill-slate-300"
                  href="https://blog.sebin-nyshkim.net/feed.xml"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="RSS Feed"
                >
                  {% icon "simple:rss", { width: 24, height: 24 } %}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>
