-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
75 lines (67 loc) · 4.3 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Javascript, responsive footnotes">
<meta name="author" content="Andrew Pilsch">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="//typebase.pilsch.com/typebase/?baseFontSize=20&baseLineHeight=1.5&scale=&production=on">
<link rel="stylesheet" href="stylesheets/jquery.inline-footnotes.css">
<style>
html {
font-family: "Georgia", "Times New Roman", serif;
}
article {
margin: auto;
}
article {
width: 100%;
max-width: 30rem;
padding: 0.5rem;
}
@media screen and (min-width: 1200px) {
article {
max-width: 45rem;
width: 100%;
padding: 0;
}
}
</style>
</head>
<body>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus ultrices diam. Nulla facilisi. Integer in neque lacus. Suspendisse in odio quis ligula volutpat dictum. Nulla lobortis congue tellus vel porta. Donec eu elementum dui, sagittis tincidunt sapien. Pellentesque lacinia tempor nisl vitae convallis.<sup id="fnref:foobar"><a href="#fn:foobar" class="footnote">1</a></sup> Sed tempor tellus id diam aliquet porta.</p>
<p>Aliquam erat volutpat. Praesent ut lobortis quam. Suspendisse potenti. Suspendisse aliquam nulla id purus semper, porttitor rhoncus sem ultricies.<sup id="fnref:2"><a href="#fn:2" class="footnote">2</a></sup> In mi elit, varius id vehicula nec, gravida et nisi. Vestibulum posuere urna sit amet enim vulputate, vel tincidunt magna vestibulum. Nam semper imperdiet mauris ac blandit. Nam eleifend, ex in volutpat fermentum, orci urna tempus enim, vel imperdiet ipsum mi sit amet purus. Sed urna sapien, vestibulum at pretium ac, convallis non sapien.</p>
<p>Fusce eget libero eget felis pellentesque ultricies finibus ut est. Aliquam euismod consectetur enim, eu imperdiet enim consequat vitae. Ut purus mauris, mollis rutrum felis et, tincidunt convallis turpis. Nunc suscipit urna quis porttitor dignissim. Duis ligula massa, vestibulum in metus nec, suscipit placerat purus. Sed felis nisl, venenatis ut tempor in, vestibulum nec leo. Etiam pharetra hendrerit magna, aliquet egestas massa bibendum nec. Integer mattis fringilla enim in mattis. Suspendisse tristique dapibus efficitur. Morbi<sup id="fnref:6"><a href="#fn:6" class="footnote">3</a></sup> commodo vel odio sed ornare. Vestibulum vel orci at nibh maximus rutrum. Pellentesque<sup id="fnref:5"><a href="#fn:5" class="footnote">4</a></sup> nec<sup id="fnref:3"><a href="#fn:3" class="footnote">5</a></sup> tincidunt dolor.<sup id="fnref:4"><a href="#fn:4" class="footnote">6</a></sup></p>
<div class="footnotes">
<ol>
<li id="fn:foobar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit augue non vulputate molestie. Praesent. <a href="#fnref:foobar" class="reversefootnote">↩</a></p>
</li>
<li id="fn:2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit augue non vulputate molestie. Praesent. <a href="#fnref:2" class="reversefootnote">↩</a></p>
</li>
<li id="fn:6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit augue non vulputate molestie. Praesent. <a href="#fnref:6" class="reversefootnote">↩</a></p>
</li>
<li id="fn:5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit augue non vulputate molestie. Praesent. <a href="#fnref:5" class="reversefootnote">↩</a></p>
</li>
<li id="fn:3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit augue non vulputate molestie. Praesent. <a href="#fnref:3" class="reversefootnote">↩</a></p>
</li>
<li id="fn:4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit augue non vulputate molestie. Praesent. <a href="#fnref:4" class="reversefootnote">↩</a></p>
</li>
</ol>
</div>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="/dist/jquery.inline-footnotes.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$.inlineFootnotes();
});
</script>
</body>
</html>