<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.min.css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <title><%= $site->title %></title>
        <style type="text/css">
            main header h1
            {
                border-bottom: 4px solid #045578;
            }
            header aside {
                margin-top: 0;
                font-size: 12pt;
            }
            .sidebar h1 {
                font-size: 14pt;
            }

            /** Add a line when using the "Continue reading..." link */
            section:target {
                padding-top: 0.5em;
                border-top: 4px solid #045578;
            }

            /** Don't allow <pre> to push too much */
            pre {
                max-width: 100%;
                overflow-x: scroll;
            }

            /** <code> is used for input and output, so let it wrap */
            code {
                white-space: normal;
            }

            .tags {
                float: right;
            }

            /**
             * Don't allow main content images to push things around
             */
            main img {
                max-width: 100%;
            }

        </style>
        % if ( $self->links->{feed} ) {
            % for my $link ( @{ $self->links->{feed} } ) {
            <link rel="alternate" href="<%= $link->{href} %>" type="<%= $link->{type} %>" />
            % }
        % }
    </head>
    <body>
        <header>
            <nav class="navbar navbar-default navbar-static-top" role="navigation">
                <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/"><%= $site->title %></a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="top-navbar-collapse-1">
                        % if ( $site->nav->{main} ) {
                        <ul class="nav navbar-nav">
                            % for my $nav ( @{ $site->nav->{main} } ) {
                            <li><a href="<%= $nav->{href} %>"><%= $nav->{title} %></a></li>
                            % }
                        </ul>
                        % }
                    </div>
                </div>
            </nav>
            %= include 'site/header_after.html'
        </header>
        <div class="main container">
            <%= $content %>
        </div>
        %= include 'site/footer.html'
    </body>
</html>