{{~ version_check "1.2.0" ~}}
{{!-- Header with CSS --}}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ book.title }}</title>
<link rel="stylesheet" href="fonts/fonts.css">
<style type="text/css">
body {
{{#if output.sans_font}}
font-family: 'BardSans', sans;
line-height: 1.25;
font-size: 1.05em;
{{else}}
font-family: 'BardSerif', serif;
{{/if}}
text-size-adjust: none;
-webkit-text-size-adjust: none;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAUCAYAAADLP76nAAAA0UlEQVR42u2VSQqFMBBE6/5n6LN9ccDZqCjOwk8FPEEWyaIXRUL6daBpisLzPEIty4Ku65DnOdI0lbqupe97GccR53niui5KYuNxHAe2bcMwGJRliaIopG1bWJBv/ER4kmNjbDzsVLYwUJzQFed5FsoY4+rf5FRsPKqqIiT7vn9TcYVuRfZN1nUl6JrtGqPjkWUZp3Xw+76u4b5vNvDOdco0TWiaBr8kiY6Hn5nC855mCs/Dz0zheU8zhec9zRSe1yTWJNYk1iTWJNYk1iQOyf8BD7JVhlKAJvgAAAAASUVORK5CYII=)
}
#content {
border: 3px solid #eaeaea;
border-bottom: none;
width: max-content;
min-width: 35em;
margin: 2em auto 0 auto;
background-color: white;
}
@media (max-width: 1000px) {
body { background: none; }
#content { border: none; }
}
h1 { font-variant: small-caps; }
a, a:link , a:visited , a:hover , a:active {
color: blue;
text-decoration: none;
}
.pad { padding: 2em; }
.ws-pre { white-space: pre; }
.faint { color: #999999; }
.faint a, .faint a:link, .faint a:visited, .faint a:hover, .faint a:active { color: #999999; }
header {
text-align: center;
margin: 7em 0 9em 0;
}
header .note {
margin-top: 5em;
}
footer {
display: block;
width: max-content;
margin: 0 auto 8em auto;
padding: 0;
}
section.song { margin: 4em 0; }
section.song h2 { text-decoration: underline; }
section.song h4 { margin: 0; }
.song-header {
text-align: left;
margin: 1em 0;
}
.song-header h2 {
margin: 0.2em 0;
}
.song-header h4 {
font-weight: normal;
font-style: italic;
}
hr.separator {
border: none;
border-top: 3px solid #eaeaea;
}
ul.blocks {
list-style-type: none;
padding-left: 3em;
}
ul.blocks li {
margin: 1em 0;
}
ul.blocks .label {
margin: 0 0.5em 0 -3em;
display: inline-block;
min-width: 2.5em;
text-align: center;
font-weight: bold;
font-size: 0.9em;
}
table.chord {
display: inline-table;
border-collapse: collapse;
white-space: pre;
vertical-align: bottom;
}
table.chord tr, table.chord td {
padding: 0;
}
tr.chord td {
font-family: 'BardSans', sans;
font-size: 85%;
color: red;
position: relative;
top: 0.1em
}
tr.chord-backticks-1 td {
font-size: inherit;
font-weight: bold;
color: red;
}
tr.chord-alt td { color: blue; }
ul.bullet-list li {
list-style-type: initial;
margin: 0.1em 0;
}
.blocks img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.blocks img.right {
float: right;
}
.blocks pre {
margin-left: 1em;
}
</style>
</head>
{{!-- HB inlines: Custom extensions. You can add your own - see documentation. --}}
{{!-- {{#*inline "h-foo"}}example{{/inline}} --}}
{{!-- HB inlines: Helpers --}}
{{#*inline "verse-label"}}
{{~#if verse}}{{verse}}.{{/if~}}
{{~#if (contains this "chorus")}}{{@root.book.chorus_label}}{{chorus}}.{{/if~}}
{{~#if custom}}{{custom}}{{/if~}}
{{/inline}}
{{!-- HB inlines: Block types --}}
{{#*inline "b-verse"}}
<li>
<span class="label">{{>verse-label label}}</span>
{{~#each paragraphs~}}
{{#unless @first}}<br><br>{{/unless~}}
{{#each this}}{{> (lookup this "type") }}{{/each}}
{{~/each~}}
</li>
{{/inline}}
{{#*inline "b-bullet-list"}}
<ul class="bullet-list">{{#each items}}<li>{{ this }}</li>{{/each}}</ul>
{{/inline}}
{{#*inline "b-horizontal-line"}}
<hr>
{{/inline}}
{{#*inline "b-pre"}}
<pre>{{ text }}</pre>
{{/inline}}
{{#*inline "b-html-block"}}
{{~#each inlines}}{{> (lookup this "type") }}{{/each~}}
{{/inline}}
{{!-- HB inlines: Inline types --}}
{{#*inline "i-text"}}{{ text }}{{/inline}}
{{!-- A chord is layed out as a small table to ensure that the total width
will be max(width of chord, width of lyrics/inlines).
There's no danger that chords might become nested in each other as bard
ensures that chords are always on top nesting level. --}}
{{#*inline "i-chord"}}<table class="chord">
<tr class="chord chord-backticks-{{ backticks }}"><td>{{ chord }}</td></tr>
{{#if alt_chord}}<tr class="chord chord-backticks-{{ backticks }} chord-alt ws-pre"><td>{{ alt_chord }}</td></tr>{{/if}}
{{#unless baseline}}<tr><td>{{#each inlines}}{{> (lookup this "type") }}{{/each}}</td></tr>{{/unless}}
</table>{{/inline}}
{{#*inline "i-break"}}<br>{{/inline}}
{{#*inline "i-emph"}}<em>{{#each inlines}}{{> (lookup this "type") }}{{/each}}</em>{{/inline}}
{{#*inline "i-strong"}}<strong>{{#each inlines}}{{> (lookup this "type") }}{{/each}}</strong>{{/inline}}
{{#*inline "i-link"}}<a href="{{ url }}" title="{{ title }}">{{ text }}</a>{{/inline}}
{{#*inline "i-chorus-ref"}}<em>{{ prefix_space }}{{ @root.book.chorus_label }}{{ num }}.</em>{{/inline}}
{{#*inline "i-image"}}<img class="{{ class }}" src="{{ path }}" title="{{ title }}" width="{{ scale width }}" height="{{ scale height }}"/>{{/inline}}
{{#*inline "i-tag"}}{{> (cat "h-" (lookup this "name")) attrs }}{{/inline}}
{{!-- Body - main structure --}}
<body>
<div id="content">
<header class="pad">
<h1>{{ book.title }}</h1>
{{#if book.subtitle }}
<h3>{{ book.subtitle }}</h3>
{{/if }}
{{~#if book.front_img}}
<img src="{{ book.front_img ~}}" width="{{ scale (img_w book.front_img) }}" height="{{ scale (img_h book.front_img) }}">
{{/if}}
{{#if book.title_note }}
<p class="note">{{ book.title_note }}</p>
{{/if }}
</header>
<hr class="separator">
<div id="index" class="pad">
<h2>Contents</h2>
<ol>
{{#if output.toc_sort}}
{{#each songs_sorted}}
<li><a href="#song-{{ idx }}">{{ title }}</a></li>
{{/each}}
{{else}}
{{#each songs}}
<li><a href="#song-{{ @index }}">{{ title }}</a></li>
{{/each}}
{{/if}}
</ol>
</div>
<hr class="separator">
{{#each songs}}
<section id="song-{{ @index }}" class="song pad">
<div class="song-header">
<h2>{{ title }}</h2>
{{#each subtitles}}<h4>{{ this }}</h4>{{/each}}
</div>
<ul class="blocks">
{{!-- Dispatch to block HB inlines prefixed b- , see above --}}
{{#each blocks}}{{> (lookup this "type") }}{{/each}}
</ul>
</section>
<hr class="separator">
{{/each}}
</div>
<footer class="faint">
Created with <strong><a href="{{ program.homepage }}">{{ program.name }}</a></strong> version {{ program.version }}.
</footer>
</body>
</html>