doctype html
html
    head
        meta(http-equiv="content-type" content="text/html; charset=UTF-8")
        meta(name="viewport" content="width=device-width, initial-scale=1")

        title EEEE. // #{title}
        meta(name="description" content=description)

        link(rel='icon' type='image/png' sizes='32x32' href='/images/favicon-32x32.png')
        link(rel='icon' type='image/png' sizes='96x96' href='/images/favicon-96x96.png')
        link(rel='icon' type='image/png' sizes='16x16' href='/images/favicon-16x16.png')

        link(rel='stylesheet', href='/stylesheets/style.css')
        block head

    body.flex.flex-col.min-h-screen.bg-black.text-pink.font-mono.text-xl
        nav
            div(class="mx-auto px-5")
                div.relative.flex.items-center.justify-between.h-16
                    div.flex-shrink-0.flex.items-center
                        p.block.text-3xl.font-extra.font
                            a(href="/") EEEE.
                    
                    div(class="absolute inset-y-0 right-0 flex items-center")    
                        div(id="menu").tham.tham-e-squeeze.tham-w-8
                            div.tham-box
                                div(class="tham-inner bg-pink")

            div
                ul(class="hidden transition duration-500 ease-in-out text-center mx-5 list-none mb-5" id="menu-items")
                    block nav-links

        main(class="flex flex-grow sm:items-stretch")
            div(class="flex flex-col sm:flex-row flex-grow max-w-4xl mx-auto px-5")
                block content

        footer.w-full.text-center.p-4.text-base
            p.font-mono © 2020 |
                |
                |
                a(href="/").underline EEEE.

        script(src="/javascript/jquery-3.5.1.min.js")
        script(src="/javascript/nav.js")
        block scripts