-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
172 lines (138 loc) · 5.53 KB
/
template.html
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta property="og:title" content="Make Way For Piggies"/>
<meta property="og:type" content="book"/>
<meta property="og:url" content="http://makewayforpiggies.huxleycraig.com"/>
<meta property="og:image" content="http://makewayforpiggies.huxleycraig.com/wiggins-facebook.png"/>
<meta property="og:description"
content="During her pregnancy with her son Huxley, Sally Honda
shared her joys, pains, frustrations, and excitement
with her friends on Facebook through prose and poetry.
Her husband Dan Craig throught it would be a good idea
collect these bits of ephemera into something more
permanent as a gift for her and their son."/>
<title>Make Way for Piggies</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="paginate.js"></script>
</head>
<body>
<div id="main">
<div id="nav">
<div id="top-title">
<a href="">Make Way for Piggies</a>
</div>
<div id="progress-wrapper">
<div id="progress">
<ul>
<li id="progress-cover"><a href="#cover"><span></span></a></li>
<li id="progress-preface"><a href="#preface"><span></span></a></li>
{% for section in sections %}
<li id="progress-{{ section.title|slugify }}"><a href="#{{ section.title|slugify }}"><span class="progress-section"></span></a></li>
{% for post in section.posts %}
<li id="progress-{{ section.title|slugify }}-{{ loop.index }}"><a href="#{{ section.title|slugify }}-{{ loop.index }}"><span></span></a></li>
{% endfor %}
{% endfor %}
<li id="progress-bonus"><a href="#bonus"><span></span></a></li>
</ul>
</div>
</div>
</div>
<div class="page_container">
<div class="page" id="cover">
<h1 class="title">Make Way for Piggies</h1>
<img id="wiggins" src="wiggins-150x71.png" />
<div class="subtitle">
<p>The Pregnancy of Huxley Craig<br />
as recorded in the<br />
Facebook Posts of his Mom</p>
<p class="author">Sally Honda</p>
</div>
<div class="edited-by">
<p>Edited by his Dad</p>
<p class="author">Dan Craig</p>
</div>
<div id="about" class="cover-section">
<h2>About This Book</h2>
<p>During her pregnancy with her son Huxley, Sally Honda shared her joys, pains,
frustrations, and excitement with her friends on Facebook through prose and poetry.
Her husband Dan Craig throught it would be a good idea collect these bits of
ephemera into something more permanent as a gift for her and their son.</p>
<p>Turn pages by clicking or tapping on the left and right sides of the page, or
by pressing the left and right arrow keys or, if you're of the geek persuasion,
by pressing the j and k keys.</p>
<p>Also available in
<a href="MakeWayForPiggies.pdf">PDF</a> and
<a href="http://www.lulu.com/shop/dan-craig/make-way-for-piggies/hardcover/product-20468040.html" target="_blank">hardback</a>.</p>
<p>The source code and data can be found on
<a href="http://github.com/drcraig/make-way-for-piggies">Github</a>.</p>
</div>
<div id="toc" class="cover-section">
<h2>Contents</h2>
<ul>
<li><a href="#preface">Preface</a></li>
{% for section in sections %}
<li><a href="#{{ section.title|slugify }}">{{ section.title }}</a></li>
{% endfor %}
</ul>
</div>
<div id="acknowledgements" class="cover-section">
<h2>Acknowledgements</h2>
<p>Thanks to <a href="https://twitter.com/chrisguidry">Chris Guidry</a>
for help writing the JavaScript to scrape the posts from Facebook.</p>
<p>Inspiration for the design of this book and website came from
<a href="http://booktwo.org/james-bridle/">James Bridle</a> and his
<a href="http://booktwo.org/notebook/vanity-press-plus-the-tweetbook/">My Life in Tweets</a>,
<a href="http://craigmod.com/">Craig Mod</a>,
and <a href="http://www.gyford.com/">Phil Gyford</a>, especially his
<a href="http://guardian.gyford.com/">Today's Guardian</a>.
</div>
<div id="copyright" class="cover-section">
© Copyright 2012 Sally Honda and Dan Craig<br/>
Version {{ version }}<br/>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</div>
<div class="page section" id="preface">
<h2>Preface</h2>
{{ preface|p }}
</div>
{% for section in sections %}
<div class="page section" id="{{ section.title|slugify }}">
<h2>{{ section.title }}</h2>
{{ section.text|p }}
</div>
{% for post in section.posts %}
<div class="page" id="{{ section.title|slugify }}-{{ loop.index }}">
<div class="timestamp">
{{ post.humantimestamp }}
</div>
<div class="post">
{{ post.text|p_br }}
</div>
{% if post.image %}
<img class="media" src="{{ post.image }}" />
{% endif %}
{% if post.youtube_id %}
<iframe class="media" width="480" height="360" src="http://www.youtube.com/embed/{{ post.youtube_id }}" frameborder="0" allowfullscreen></iframe>
{% endif %}
</div>
{% endfor %}
{% endfor %}
<div class="page section" id="bonus">
<h2>Bonus</h2>
<p>By sheer coincidence, we later learned there was once a children's
television show in the UK called, of all things,
<a href="http://en.wikipedia.org/wiki/Huxley_Pig">Huxley Pig</a>.</p>
<iframe width="480" height="360" src="http://www.youtube.com/embed/JXjpvIZo_tQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div id="controls">
<div class="page-turn" id="next"><a href >→</a></div>
<div class="page-turn" id="prev"><a href >←</a></div>
</div>
</body>
</html>