forked from dauwhe/acme-labs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (108 loc) · 3.58 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bookstore</title>
<style type="text/css">
body {
background-color: #F8F8F8;
}
h1 {
font-size: 1.33rem;
font-variant: small-caps;
letter-spacing: 1px;
font-weight: normal;
text-align: center;
}
ol {
list-style-type: none;
}
li {
line-height: 1.5rem;
}
table {
border-collapse: collapse;
background-color: white;
margin: 0 auto 0 auto;
border: 4px solid #f8f8f8;
}
th {
background-color: #f8f8f8;
color: #555;
font-family: sans-serif;
letter-spacing: 1px;
}
td {
background-color: white;
border: 4px solid #f8f8f8;
font-family: sans-serif;
}
td, th {
vertical-align: top;
text-align: left;
padding: 3px 6px;
}
a {
color: #304A7B;
}
p {
text-align: center;
text-indent: 0;
}
section p {
text-align: left;
}
section p + section p {
text-indent: 1.2em;
}
</style>
</head>
<body>
<h1>Acme Labs</h1>
<table>
<tr>
<th></th>
<th>Title</th>
<th>Author</th>
</tr>
<tr>
<td><img src="covers/moby-dick-book-cover.jpg" height="100" alt="Moby Dick Book Cover"/></td>
<td><a href="main.html?manifest=MobyDick/manifest.json">Moby-Dick</a></td>
<td>Herman Melville</td>
</tr>
<tr>
<td><img src="covers/Bartleby.jpg" height="100" alt="Bartleby Book Cover"/></td>
<td><a href="main.html?manifest=Bartleby/manifest.json">Bartleby, The Scrivener</a></td>
<td>Herman Melville</td>
</tr>
<tr>
<td><img src="covers/mott.jpg" height="100" alt="Lucretia Mott Book Cover"/></td>
<td><a href="main.html?manifest=Mott/manifest.json">Discourse on Woman</a></td>
<td>Lucretia Mott</td>
</tr>
<tr>
<td><img src="covers/lighthouse.jpg" height="100" alt="To the Lighthouse Book Cover"/></td>
<td><a href="main.html?manifest=Lighthouse/manifest.json">To the Lighthouse</a></td>
<td>Virginia Woolf</td>
</tr>
<tr>
<td><img src="covers/orlando.jpg" height="100" alt="Orlando Book Cover"/></td>
<td><a href="main.html?manifest=Orlando/manifest.json">Orlando</a></td>
<td>Virginia Woolf</td>
</tr>
<tr>
<td><img src="covers/BiB.jpg" height="100" alt="Books in Browsers Image"/></td>
<td><a href="main.html?manifest=BooksInBrowsers/manifest.json">A Bag Full of Stories</a></td>
<td>Dave Cramer</td>
</tr>
</table>
<p><i><a href="https://jakearchibald.github.io/ebook-demo/publisher-site/readme/">Service Worker</a> by <a href="https://twitter.com/jaffathecake">@jaffathecake</a></i>, although I’ve now ruined it.</p>
<section>
<h1>What’s all this, then?</h1>
<p>This is another experiment along the lines of PWP, BFF, or EPUB Zero. The goal was to provide an environment for reading books, where the content itself was as simple as possible. There’s no JavaScript in the books; information about the book is in a web application manifest style extended with a “spine” and other “resources.” The book is displayed in an iframe. The previous/next buttons read from the manifest. A service worker allows offline reading, and can download the book as a zip file. Soon I hope to be able to package as EPUB3 as well. In the absence of a framework that understands the manifest, point to the <code>index.html</code> file of each book to find ordinary navigation, etc.</p>
<p>What have I learned? Creating zips from a cache is tricky. The one hard problem in computer science is paths. Having a list of the components of a publication is <i>really</i> useful.</p>
<p>Yes, this is really buggy, mostly because I don’t know JS.</p>
<aside>The content is paginated in Safari desktop, Chrome, and Opera 12.16 due to the glory of <code>overflow: paged-x</code>.</aside>
</section>
</body>
</html>