website/templates/layout.pug

mixin nav-item(url, name)
    a(href=url)= name

mixin image(src)
    if typeof src === "string"
        img(src=src)
    else
        picture
            each val, key in src
                if key == "_fallback"
                    img(src=val)
                else
                    source(srcset=val, type=key)

doctype html
html(lang="en")
    head
        link(rel="preload", href="/assets/share-tech-mono.woff2", as="font", crossorigin="anonymous")
        link(rel="preload", href="/assets/titillium-web-semibold.woff2", as="font", crossorigin="anonymous")
        link(rel="preload", href="/assets/titillium-web.woff2", as="font", crossorigin="anonymous")
        title= `${title} @ ${name}`
        script(src="/assets/js/page.js", defer=true)
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        if description
            meta(name="description", content=description)
        link(rel="manifest", href="/assets/manifest.webmanifest")
        link(rel="shortcut icon", href="/assets/images/logo256.png", type="image/png")
        meta(content=`https://${domain}/assets/images/logo256.png`, property="og:image")
        style!= css
        if comments !== "off"
            script(src=`https://${domain}/isso/js/embed.min.js`, async=true, data-isso=`https://${domain}/isso/`)
    body
        .nav-container
            nav
                a.logocont(href="/")
                    img.logo(src="/assets/images/logo256.png", alt="osmarks.net logo")
                    .logotext osmarks
                +nav-item(`https://mse.${domain}/`, "Meme Search")
                +nav-item(`https://i.${domain}/`, "Images")
                +nav-item("https://github.com/osmarks/website", "Contribute")
                +nav-item(`https://b.${domain}`, "Microblog")
                +nav-item(`https://status.${domain}`, "Status")
                +nav-item(`https://r.${domain}/login`, "Login")
                block nav-items
        .sidenotes-container
            main(class=!haveSidenotes ? "fullwidth" : "")
                .header
                    h1.page-title= title
                    block under-title
                    h3.deemph
                        if updated
                            span= `Updated ${renderDate(updated)}`
                            if created || wordCount
                                span= " / "
                        if created
                            span= `Created ${renderDate(created)}`
                            if wordCount
                                span= " / "
                        if wordCount 
                            span= `${metricPrefix(wordCount, "")} words`
                    if description
                        em.description!= description
                block content

                if comments !== "off"
                    .isso
                        section(id="isso-thread")

            if haveSidenotes
                .sidenotes