Pray for... simple list photo w/birthday (edit of 3 col Directory)
3 col
Preview
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
{% assign sorted_people = people | sort: "birthday" %}
<html>
<head>
<title>Birthdays</title>
{{ helpers.bootstrap_3 }}
<style>
html, * {font-family: lato, sans-serif; line-height:1.4em; margin: 0;}
@page {margin: .5in 0;} /*-- PDF margin reset --*/
body {margin: 0;}
/*-- Baseline Fonts --*/
h1 {font-size: 14.5pt; font-weight: bold;} /*-- Report Title --*/
h2 {font-size: 13.5pt;} /*-- Household Name --*/
h3 {font-size: 10.5pt; font-weight:normal;} /*-- Household Address --*/
li {font-size: 9pt;} /*-- List Info, Person's Info --*/
li.name {font-size: 10.5pt;} /*-- Person's Name --*/
.btn {font-size: 9pt; font-weight: bold;} /*-- Print Button --*/
/*-- Baseline Spacing --*/
.header h1 {margin: 0 0 1em;} /*-- Report Title --*/
.main h2 {margin: 0 1em 0 0;} /*-- Household Name --*/
.main h3 {margin: 0;} /*-- Household Address --*/
li.name {margin-bottom: .25em;} /*-- Person's Name --*/
.entry {float:left; margin:0 0 .5em 0; padding-left: .15em; width: 225px; height: 90px; display: flex;}
.entry:after{content: "";display: table;clear: both;}
.avatar {border: 3px solid rgb(221, 221, 221); float:left; margin-right: .5em; width: 3.6em; align-self: flex-start; border-radius: 50%;}
.entry ul {float:left; list-style:none; margin:0; padding:0;}
li.email {overflow-wrap: break-word; width: 170px; word-wrap: break-word;} /*-- allows long emails to break into multiple lines --*/
@media screen {
h1 {font-size: 20px; font-weight: bold; margin-top:0;}
h2 {font-size: 18px;}
h3 {font-size: 14px; font-weight:normal;}
h4 {font-size: 14px font-weight: bold;}
li {font-size: 12px;}
li.name {font-size: 14px; font-weight: bold; margin-bottom: 4px;}
.btn {font-size: 12px;}
.wrapper{padding: 1em; border: 1px solid rgb(204,204,204); margin:1.5em auto; max-width:740px;}
}
@media print {
.no-print {display: none;} /*----- Apply this class to any element you do not want on the print view ----*/
body {margin: .15in;} /*----- Adjust this to change the page margins for printing ----*/
.entry {width: 258px;}
li.email {width: 184px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
{% for person in sorted_people %}
<div class="entry">
<img class="avatar" src="{{ person.photo_url }}">
<ul>
<li class="name">
{% if person.name_suffix != "" %}
{{ person.first_name | append: "," }}
{% else %}
{{ person.first_name }} {{ person.last_name }}
{% endif %}
{% if person.last_name != person.primary_contact.last_name %}{{ person.last_name }}{% endif %}
{{ person.name_suffix }}
</li>
<li>{{ person.primary_phone_number }}</li>
<li class="email">{{ person.primary_email }}</li>
<li>
{% if person.birthdate.date | strip | size != 0 %}
{{ person.birthdate | date: "%b %d" }}
{% endif %}
</li>
</ul>
</div>
{% endfor %}
</div>
</div>
</body>
</html>