<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{meta_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">
    <link rel="stylesheet" type="text/css" href="{{asset "built/tailwind.css"}}">

    {{ghost_head}}
</head>
<body class="{{body_class}} bg-bgr text-typ antialiased">
    {{> "site/topbar"}}
    <div class="left-sidebar-backdrop" data-left-sidebar-backdrop hidden></div>
    <div class="site-shell-wrap border-t border-brd bg-bgr">
        <div class="site-shell mx-auto">
            {{> "site/sidebar-left"}}
            <div class="site-main min-w-0 bg-bgr">
                {{{body}}}
            </div>
            {{> "site/sidebar-right"}}
        </div>
    </div>

    {{ghost_foot}}
    <script defer src="{{asset "built/alpine.js"}}"></script>
    <script src="{{asset "built/theme.js"}}"></script>
</body>
</html>
