generated from royalfig/ghost-theme-starter
/
default.hbs
80 lines (55 loc) · 3.87 KB
/
default.hbs
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
<!doctype html>
<html lang="{{@site.locale}}" data-color-pref="{{@custom.color_mode}}" class="{{@custom.color_mode}}" data-accent-color="{{@site.accent_color}}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" IE="edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset 'built/index.css'}}">
<link rel="stylesheet" type="text/css" href="https://jsd.cdn.zzko.cn/npm/hint.css@2.7.0/hint.base.min.css">
<script>
function e(e) { let t = 0, n = 0, o = 0; return 4 === e.length ? (t = `0x${e[1]}${e[1]}`, n = `0x${e[2]}${e[2]}`, o = `0x${e[3]}${e[3]}`) : 7 === e.length && (t = `0x${e[1]}${e[2]}`, n = `0x${e[3]}${e[4]}`, o = `0x${e[5]}${e[6]}`), [t, n, o] } !function () { const [t, n, o] = document.documentElement.dataset.accentColor ? e(document.documentElement.dataset.accentColor) : e("#ff0000"), [m, c, r] = function (e) { const [t, n, o] = e, m = t / 255, c = n / 255, r = o / 255, l = Math.min(m, c, r), s = Math.max(m, c, r), u = s - l; let d = 0, y = 0, a = 0; return d = 0 === u ? 0 : s === m ? (c - r) / u % 6 : s === c ? (r - m) / u + 2 : (m - c) / u + 4, d = Math.round(60 * d), d < 0 && (d += 360), a = (s + l) / 2, y = 0 === u ? 0 : u / (1 - Math.abs(2 * a - 1)), y = +(100 * y).toFixed(1), a = +(100 * a).toFixed(1), [d, y, a, parseInt(t), parseInt(n), parseInt(o)] }([t, n, o]), l = m + 180 > 360 ? m - 180 : m + 180; document.documentElement.style.setProperty("--primary-h", m), document.documentElement.style.setProperty("--saturation", `${c}%`), document.documentElement.style.setProperty("--lightness", `${r}%`), document.documentElement.style.setProperty("--complementary-color", l), document.documentElement.style.setProperty("--r", t / 255), document.documentElement.style.setProperty("--g", n / 255), document.documentElement.style.setProperty("--b", o / 255), document.documentElement.style.setProperty("--cr", (255 - t) / 255), document.documentElement.style.setProperty("--cg", (255 - n) / 255), document.documentElement.style.setProperty("--cb", (255 - o) / 255) }();
</script>
<script>
const colorModePref = document.documentElement.dataset.colorPref;
const colorModePrefOpposite = colorModePref === 'dark' ? 'light' : 'dark'
if (
localStorage.getItem('pref') === colorModePrefOpposite ||
(window.matchMedia(`(prefers-color-scheme: ${colorModePrefOpposite})`).matches &&
!localStorage.getItem('pref'))
) {
document.documentElement.setAttribute('data-color-pref', colorModePrefOpposite);
document.documentElement.setAttribute('class', colorModePrefOpposite);
}
</script>
<script src="https://jsd.cdn.zzko.cn/npm/twikoo@1.6.16/dist/twikoo.min.js" type="application/javascript"></script>
{{!-- Output SEO + Meta data and other settings by Ghost --}}
{{ghost_head}}
</head>
{{!-- {{ if not .Site.Params.disable_image_filters }}image-filters-enabled{{ end }} --}}
<body class="{{body_class}} archive">
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
{{!-- {{ if .Params.image }}featured-image{{ end }} --}}
<header id="masthead" class="site-header ">
<div class="site-branding-container">
{{> "header/site-branding" }}
</div><!-- .layout-wrap -->
{{> "header/entry-header" }}
<!-- For single posts and pages, special treatment if there's a featured image -->
{{ end }}
</header><!-- #masthead -->
<div id="content" class="site-content">
<section id="primary" class="content-area">
<main id="main" class="site-main">
{{{body}}}
</main>
</section>
</div>
{{> "footer" }}
</div>
{{ghost_foot}}
<script src="{{asset 'built/index.js'}}"></script>
<script src="{{asset 'built/syntax-highlighting.js'}}"></script>
</body>
</html>