---
import { SEO } from "astro-seo";
const { frontmatter } = Astro.props;
import "./MarkdownLayout.css";
---

<html lang="en">
  <head>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="stylesheet" href="/font.css" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <SEO
      charset="utf-8"
      title={`Zvonimir Rudinski | ${frontmatter.title}`}
      description={frontmatter.description}
      twitter={{
        creator: "@rudinskiz",
      }}
    />
  </head>
  <body class="bg-primary m-12">
    <h1 class="text-2xl md:text-4xl text-secondary font-squada">
      $ Zvonimir Rudinski / Blog
    </h1>

    <a
      href="/blog"
      class="font-pt-sans text-white hover:text-secondary hover:text-underline transition-colors"
    >
      ← Back to Blog</a
    >
    <br />
    <div id="content">
      <h1 class="text-4xl md:text-6xl text-secondary font-pt-sans">
        {frontmatter.title}
      </h1>
      <slot />
    </div>

    <footer>
      <p class="text-secondary text-center">&copy; 2024 Zvonimir Rudinski</p>
    </footer>
  </body>
</html>
