-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathdefault.hbs
58 lines (43 loc) · 2.98 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
<!DOCTYPE html>
<html lang="{{@site.locale}}" data-color-pref="{{@custom.color_mode}}" data-accent-color="{{@site.accent_color}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{meta_title}}</title>
{{!-- Preloads and preconnects --}}
<link rel="preconnect" href="https://cdn.jsdelivr.net/">
<link rel="preload" href="/assets/fonts/Archivo-Variable.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/Lora[wght].woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="{{asset 'built/app.css'}}">
{{! Load scripts to execute before render }}
<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);
}
</script>
{{!-- Scripts and styles for after load --}}
<script src="{{asset 'built/app.js'}}" type="module" defer></script>
{{#is "post"}}
<script src="{{asset 'built/syntax-highlighting.js'}}" type="module" defer></script>
{{/is}}
{{!-- Output SEO + Meta data and other settings by Ghost --}}
{{ghost_head}}
<style>
.kg-bookmark-card a.kg-bookmark-container{font-family:var(--ui-typeface);border-color:hsl(var(--border-color));border-radius:var(--radius);transition:border-color .3s}.kg-bookmark-card .kg-bookmark-icon{margin-inline:0 6px}.kg-bookmark-title{font-size:1rem}.kg-bookmark-content{padding:1rem}.kg-bookmark-description{font-size:var(--small);color:hsl(var(--element-light))}.kg-bookmark-metadata{font-size:var(--small)}.kg-bookmark-card:hover a.kg-bookmark-container{border-color:hsl(var(--color-1-light));border-radius:var(--radius)}.kg-toggle-card{padding:1rem;border:1px solid hsl(var(--border-color));border-radius:var(--radius);box-shadow:none}.kg-btn,.kg-button-card,.kg-callout-card{border-radius:var(--radius)}.kg-toggle-heading svg{color:hsl(var(--color-1-light))}.kg-toggle-card:hover .kg-toggle-heading svg{color:hsl(var(--color-1))}.kg-button-card{font-family:var(--ui-typeface);font-weight:700;text-transform:uppercase}.kg-btn{height:initial;padding:var(--button-padding)}.kg-btn-accent{color:var(--button-text);background-color:hsl(var(--color-1));transition:background-color .3s}.kg-btn-accent:hover{background-color:hsl(var(--color-1-light));opacity:1}.kg-callout-card{padding:1rem;background-color:hsl(var(--border-color))}
</style>
</head>
<body class="{{body_class}}">
{{> "svg"}}
{{> "navbar"}}
{{{body}}}
{{> "footer"}}
{{!-- Ghost footer required, right before the closing body tag --}}
{{ghost_foot}}
</body>
</html>