Minimalist
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
117
118
119
120
121
122
123
124
125
126
<!--
QUICK CUSTOMIZATION:
{% assign print_description = true %}
-->
<html>
<head>
<title>{{ plan.ministry.name }}:: {{ plan.dates }}</title>
<style>
/* Base */
body { padding:0; margin:5px; color:#313336; font:13px/1.5 Verdana, Helvetica, Arial, sans-serif; }
/* Table skeleton */
table#plan { width:100%; border-collapse:collapse; margin-top:0; margin-bottom:15px; }
table#plan thead { display:table-header-group; }
table#plan th {
border-left:1px solid #D7DBE4; border-right:1px solid #D7DBE4;
color:#ADB3C0; font-weight:bold; padding:4px 7px 2px; vertical-align:middle;
}
/* Generic cells */
table#plan td { text-align:left; font-size:1em; }
table#plan tbody td { border:0; padding:15px; vertical-align:middle; }
/* Time / length columns */
.time { width:50px; text-align:left; vertical-align:middle; }
.length { width:55px; text-align:left; vertical-align:middle; font-size:.9em; }
/* Header row */
table#plan .header {
text-align:center; color:black; font-weight:bold; padding:4px 7px;
font-size:1.0em; background:#b0b2b3;
}
/* Content cell */
.element { text-align:left; font-size:0.9em; vertical-align:middle; padding:5px; }
/* Song row shading */
.song { background:#f7f7f7; }
/* Titles */
.song_title { font-style:italic; font-weight:bold; }
.item_title { font-style:normal; }
/* Description under title for songs */
.song-description { font-style:normal; font-size:0.9em; color:#555; margin-top:2px; }
/* Description for items on right */
.description-inline { font-style:normal; font-size:0.9em; color:#7F7F7F; white-space:nowrap; }
/* Key badge */
.key {
font-weight:bold; padding:2px 5px; margin-left:6px;
background-color:#e6e6e6; border:1px solid #C0C0C0; display:inline-block; border-radius:3px;
}
/* Layout */
.song-title-line { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.song-title-block { display:flex; flex-direction:column; align-items:flex-start; }
.title-and-key { display:flex; align-items:baseline; gap:6px; }
/* Page header */
H1 { font-size:28px; font-weight:normal; margin:0; padding:0; }
H2 { font-size:20px; font-weight:normal; }
H3 { font-size:18px; margin-bottom:15px; }
H4 { font-size:12px; font-weight:normal; margin-top:10px; margin-bottom:15px; }
PRE { margin:0; padding:0; white-space:pre-wrap; font-size:.9em; }
#header { padding:15px 0; color:black; line-height:.8em; margin:0; }
</style>
</head>
<body>
{% comment %}<img style="float:left; margin-right:15px; height:50px;" src="{{ organization.logo_url }}" />{% endcomment %}
<div id="header">
<h1>{{ plan.ministry.name }}</h1>
<h3>{{ plan.dates }}</h3>
</div>
{% if hide_flow != true %}
<table id="plan">
<tbody>
{% for item in plan.items %}
{% case item.item_type %}
{% when 'Header' %}
<tr>
<td colspan="2" class="header">{{ item.title }}</td>
</tr>
{% else %}
<tr class="{% if item.is_preservice or item.is_postservice %}preservice{% endif %}">
<td class="time{% if item.song %} song{% endif %}">{{ item.length }}</td>
<td class="item element{% if item.song %} song{% endif %}">
<div class="song-title-line">
<!-- LEFT: Title + Key -->
<span class="song-title-block">
<span class="title-and-key">
<span class="{% if item.song %}song_title{% else %}item_title{% endif %}">{{ item.title }}</span>
{% if item.arrangement.music_key %}
<span class="key">{{ item.arrangement.music_key }}</span>
{% endif %}
</span>
<!-- Description replaces arrangement name here for songs -->
{% if item.song and item.description %}
<span class="song-description">{{ item.description }}</span>
{% endif %}
</span>
<!-- RIGHT: Description for non-song items -->
{% if print_description and item.description %}
{% unless item.song %}
<span class="description-inline">{{ item.description }}</span>
{% endunless %}
{% endif %}
</div>
</td>
</tr>
{% endcase %}
{% endfor %}
</tbody>
</table>
{% endif %}
</body>
</html>