<!doctype html>
<html>

<head>
	<title>{{ title }}</title>
        
	<meta property="og:title" content="{{ title }}" />
	<meta property="og:description" content="{{ description }}" />

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/assets/css/index.css" rel="stylesheet" />
</head>

<body class="min-h-screen h-full flex flex-col p-8 h-full">
    <div class="flex flex-col items-center">
        <!-- Allow the header to be independently sized from the content -->
        <div>
            <div class="flex flex-row">
                <img class="w-32 md:w-36 lg:w-48 h-32 md:h-36 lg:h-48 rounded-lg" src="https://cdn.polynom.me/img/avatar.jpg" />

                <div class="flex flex-col justify-center px-8">
                    <a href="/"><h1 class="text-xl lg:text-4xl text-indigo-400">PapaTutuWawa</h1></a>

                    <div class="flex flex-row justify-between">
                        <a class="text-indigo-400" href="https://blog.polynom.me">Blog</a>
                        <a class="text-indigo-400" href="/code.html">Code</a>
                        <a class="text-indigo-400" href="/contact.html">Contact</a>
                    </div>
                </div>
            </div>
        </div>

        {{ content }}
    </div>
</body>

</html>