sourcefolio/default.hbs at main · thameemk/sourcefolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>

    {{!-- Basic meta - advanced meta is output with {{ghost_head}} below --}}
    {{!-- Title format: "Page title | Site name" ("meta_title" alone shows the bare
    site title plus a page suffix on custom collections like /blog/) --}}
    <title>
        {{~#is "home"~}}
            {{@site.title}}
        {{~else is "post, page"~}}
            {{meta_title page=""}} | {{@site.title}}
        {{~else is "tag"~}}
            {{#tag}}{{name}}{{/tag}} | {{@site.title}}
        {{~else is "author"~}}
            {{{block "page-title"}}}
        {{~else~}}
            Blog | {{@site.title}}{{#is "paged"}} (Page {{pagination.page}}){{/is}}
        {{~/is~}}
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{!-- Preload main styles and scripts for better performance --}}
    <link rel="preload" as="style" href="{{asset "built/screen.css"}}">
    <link rel="preload" as="script" href="{{asset "built/source.js"}}">

    {{!-- Fonts are preloaded and defined in the default template to avoid layout shift --}}
    {{> "typography/fonts"}}

    {{!-- Theme assets - use the {{asset}} helper to reference styles & scripts, this will take care of caching and cache-busting automatically --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">

    {{!-- Custom background color --}}
    <style>
        :root {
            --background-color: {{@custom.site_background_color}}
        }
    </style>

    <script>
        /* The script for calculating the color contrast has been taken from
        https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
        var accentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
        accentColor = accentColor.trim().slice(1);

        if (accentColor.length === 3) {
            accentColor = accentColor[0] + accentColor[0] + accentColor[1] + accentColor[1] + accentColor[2] + accentColor[2];
        }

        var r = parseInt(accentColor.substr(0, 2), 16);
        var g = parseInt(accentColor.substr(2, 2), 16);
        var b = parseInt(accentColor.substr(4, 2), 16);
        var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
        var textColor = (yiq >= 128) ? 'dark' : 'light';

        document.documentElement.className = `has-${textColor}-text`;
    </script>

    {{!-- Hide the site logo and "Sign up" nav from the footer bar (keeps .gh-social-links untouched),
    and inject plain copyright text centered in the now-empty footer bar --}}
    <style>
        .gh-footer-bar .gh-footer-logo,
        .gh-footer-bar .gh-footer-menu,
        .gh-footer-bar .gh-footer-copyright {
            display: none !important;
        }

        .gh-footer-bar {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            width: 100% !important;
            min-height: 60px;
            margin-bottom: 24px !important; /* theme default is 120px, was leaving a big gap */
        }

        .gh-footer-bar::after {
            content: {{@site.title}} {{date format="YYYY"}} !important;
            font-size: 14px !important;
            color: #15171a !important;
            font-weight: 500 !important;
            letter-spacing: -0.1px;
        }
    </style>

    {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings, it should always be the last tag before the closing head tag --}}
    {{ghost_head}}

</head>
<body class="{{body_class}} has-{{#match @custom.title_font
                                         "Elegant serif"}}serif{{else match @custom.title_font "Consistent mono"}}mono{{else}}sans{{/match}}-title has-{{#match
        @custom.body_font "Elegant serif"}}serif{{else}}sans{{/match}}-body">

<div class="gh-viewport">

    {{> "components/navigation" navigationLayout=@custom.navigation_layout}}

    {{{body}}}

    {{> "components/footer"}}

</div>

{{#is "post, page"}}
    {{> "lightbox"}}
{{/is}}

{{!-- Scripts - handle responsive videos, infinite scroll, and navigation dropdowns --}}
<script src="{{asset "built/source.js"}}"></script>

{{!-- Ghost outputs required functional scripts with this tag, it should always be the last thing before the closing body tag --}}
{{ghost_foot}}

</body>
</html>