<!DOCTYPE html>
<html>
    <head>
        <title>Yancy CMS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        %= stylesheet "/yancy/bootstrap.css"
        %= stylesheet "/yancy/font-awesome/css/font-awesome.css"
        %= javascript "/yancy/jquery.js"
        %= javascript "/yancy/popper.js"
        %= javascript "/yancy/bootstrap.js"
        %= stylesheet begin
            html, body { height: 100%; }
            .non-footer {
                min-height: calc( 100% - 3em );
            }
            .non-footer + footer {
                box-sizing: border-box;
                padding: 0 1em;
                height: 3em;
            }
            main {
                padding-top: 10px;
            }
        % end
        %= content_for 'head'
    </head>
    <body>

        <div class="non-footer">
            %= content
        </div>

        <footer class="bg-light d-flex flex-row-reverse align-items-center">
            <small>Yancy v<%= Mojolicious::Plugin::Yancy->VERSION %> (<a href="http://github.com/preaction/Yancy">Github</a>)</small>
        </footer>

    </body>
</html>