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

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

        <link rel="stylesheet" type="text/css" href="{{asset "css/global.css"}}" />
        <link rel="stylesheet" type="text/css" href="{{asset "css/notifications.css"}}" />

        <script src="{{asset "js/global.js"}}"></script>
        <script src="{{asset "js/custom-elements.js"}}"></script>
        <script>        
            hexToRgba("{{@custom.text_color}}")
            document.addEventListener('DOMContentLoaded', function () {
                lazyLoadImages();
            }) 
        </script>

        <style>
            :root {
                --text-color: {{@custom.text_color}};
                --background-color: {{@custom.background_color}};
                --logo-scale: {{@custom.logo_scale}};
                --heading-style: {{@custom.card_heading_style}};
                --font1: var(--gh-font-body, 'Open Sans');
                --font2: var(--gh-font-heading, 'EB Garamond');
                --font3: var(--gh-font-heading, 'Roboto Condensed');
                --font4: var(--gh-font-heading, 'Chomsky');
            }     
        </style>

        {{!-- Demo content --}}
        {{#match @site.url "http://localhost:2368"}}
            <style>
                @media (min-width: 991px) { 
                    article,
                    .main {
                        opacity: 0;
                    }
                }
            </style>
        {{/match}}

        {{#match @site.url "https://newspaper.kusa-projects.com"}}
            <style>
                @media (min-width: 991px) { 
                    article,
                    .main {
                        opacity: 0;
                    }
                }
            </style>
        {{/match}}

        {{#match @custom.image_style "Tinted"}}
            <style>
                :root {
                    --image-filter: grayscale(1) sepia(0.35) contrast(0.85);
                }            
            </style>
        {{/match}}

        {{#match @custom.image_style "Grayscale"}}
            <style>
                :root {
                    --image-filter: grayscale(1);
                }
            </style>
        {{/match}}

        {{!-- Always last --}}
        {{ghost_head}}

        <script>
            loadFonts("{{@custom.fonts}}");
        </script>
    </head>
    <body>
        <div class="viewport">
            <div class="site-content">
                <div class="site-main">
                    {{> "components/navbar" }}
                    {{> "components/announcement-bar"}}
                    {{{body}}}
                    {{> "components/footer" }}
                </div>
            </div>
        </div> 

        {{> "components/notifications"}}

        {{!-- Demo content --}}
        {{#match @site.url "http://localhost:2368"}}
            {{> "components/demo"}}
        {{/match}}

        {{#match @site.url "https://newspaper.kusa-projects.com"}}
            {{> "components/demo"}}
        {{/match}}

        {{!-- Always last --}}
        {{ghost_foot}}
    </body>
</html>

