-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·185 lines (170 loc) · 8.65 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
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
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Epilogue</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Epilogue is a design and publishing studio exploring new takes on some of the worlds best stories. Aimed at the intersection of text, art, and technology, the studio is working with a variety of creative talents in order to create lasting editions that are thoughtfully designed and carefully produced. At the center of each edition is the physical book, a form to which Epilogue has a permanent, but not exclusive, commitment to.">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<link rel="icon" type="image/png" href="./images/favicon.png">
<script src="//use.typekit.net/lqx0otn.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body style="opacity: 0;">
<div id="stage">
<div id="header" class="section">
<div class="container">
<h1 class="first-read">Epilogue</h1>
<h2 class="first-read">San Francisco</h2>
<br />
<p class="about-button first-read">
<a id="about-button" href="#"><span>About</span></a>
</p>
<div id="about">
<p class="description">
Epilogue is a design and publishing studio exploring new takes on some of the worlds best literature. Aimed at the intersection of art, technology, and text, the studio draws from a variety of creative backgrounds to create contemporary editions that are thoughtfully designed and carefully produced. At the center of each edition is the physical book, a form to which Epilogue has a permanent, but not exclusive, commitment.
</p>
<p class="description">
The studio was founded in the fall of 2014 by Chris Lauritzen, a reader and designer who left his job to work towards what has been a persistent dream throughout his career - to spend his days working with good content and to share it with others. Flatland is the first edition to come out of that work.
</p>
<p class="description social">
We’re on <a href="mailto:[email protected]" target="_blank">Email</a> & <a href="//twitter.com/epilogue_press" target="_blank">Twitter</a> & <a href="//instagram.com/epiloguepress" target="_blank">Instagram</a>
</p>
<!-- Begin MailChimp Signup Form -->
<!-- <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> -->
<div id="mc_embed_signup">
<form action="//press.us10.list-manage.com/subscribe/post?u=01d60652174e7e27ba624843d&id=c73b4d35a5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<p>
Subscribe to our mailing list:
<br />
<input type="email" placeholder="Email Address" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button">
</p>
</form>
</div>
<!-- <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> -->
<!--End mc_embed_signup-->
</div>
<div id="measurement"></div>
<div class="ep"></div>
<div class="ep-0"></div>
</div>
</div>
<div id="flatland" class="section">
<div class="container">
<!-- <div class="ep-black"></div> -->
<!-- <div class="ep-1"></div> -->
<div class="title">
Flatland
<a href="https://www.kickstarter.com/projects/epiloguepress/ep1-flatland" target="_blank"><div class="on-kickstarter"></div></a>
</div>
<div class="image" data-src="./images/thumbnails/Ep1_001.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_003.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_004.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_005.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_006.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_007.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_023.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_016b.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_018b.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_020.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_031.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_035.jpg"></div>
</div>
<div class="container">
<div class="image" data-src="./images/thumbnails/Ep1_036.jpg"></div>
</div>
</div>
<div id="footer" class="section">
<br />
<p class="first-read">
© Epilogue 2015 – Printing and binding by <!-- <a href="http://www.thekeyprintingandbinding.com/" target="_blank"> --> The Key – Photography by James Han
</p>
<br />
</div>
</div>
<div class="scripts">
<script src="./third-party/jquery.js"></script>
<script src="./third-party/masonry.js"></script>
<script>
$(function() {
var $header = $('#header');
var $about = $('#about').css('opacity', 0);
var $window = $(window);
var resize = function() {
$header.margin = $('#measurement').offset().top - $about.offset().top;
if (!$header.hasClass('enabled')) {
$header.css('margin-bottom', - $header.margin);
}
};
$window.bind('resize', resize);
$header.button = $('#about-button')
.click(function(e) {
e.preventDefault();
if ($header.toggleClass('enabled').hasClass('enabled')) {
$header.css('margin-bottom', 0).button.find('span').html('Close');
$about.css('opacity', 1);
} else {
$header.css('margin-bottom', - $header.margin).button.find('span').html('About');
$about.css('opacity', 0);
}
});
var loadImages = function() {
$('.image').each(function(i, child) {
$(child).toggleClass('loading', true);
var image = document.createElement('img');
image.onload = function() {
$(child).css({
backgroundImage: 'url(' + child.getAttribute('data-src') + ')'
});
$(child).toggleClass('loading', false);
setTimeout(function() {
$(child).toggleClass('loaded', true);
}, 100);
};
image.src = child.getAttribute('data-src');
});
}
// Preload the first image, wha-whaaaat!
var image = document.createElement('img');
image.onload = function() {
$(document.body).css('opacity', 1);
// Then show the page and load rest of the images.
resize();
loadImages();
};
image.src = $('.image')[0].getAttribute('data-src');
});
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61496109-1', 'auto');
ga('send', 'pageview');
</script>
</div>
</body>
</html>