forked from darth-cheney/Grantnotes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example2.html
34 lines (33 loc) · 6.81 KB
/
example2.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
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="grantnotes.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="header"><h1>--THIS IS A HEADER SPACE--</h1></div><!-- #header -->
<div class="entry-content">
<article class="main-article">
<p align="justify">
Lorem ipsum dolor sit amet, eget duis ultrices.<sup>1</sup><span class="footnote-text">This is the text of the first footnote.</span> Sit tincidunt egestas auctor quam. Cras dolor turpis. Commodo elit gravida convallis, suspendisse donec justo, lacus in nunc aenean urna libero ac. Vestibulum mi et, vero ante, fermentum nec et id cras in arcu. Nulla diam eget libero sed praesent sed.</p>
<p align="justify">
Bibendum praesent vestibulum faucibus libero nulla urna, viverra et sit lorem elementum. Magna semper luctus mi dis, magni augue vivamus proin pellentesque quis, donec magna ligula nullam cursus, metus luctus. Mi volutpat, tellus in nec, consectetuer sapien dolor enim, justo dictum proin. Adipiscing eget, ligula ridiculus tincidunt ac nec aenean.<sup>2</sup><span class="footnote-text">This is the text of the second footnote. We'll make this one a little longer so you can see how the long footnotes appear on the page. It should appear aligned with the sentence in which the superscript appears.</span> Vel lectus curae aenean integer velit fringilla, facilisi gravida elementum erat, nam odio urna unde rhoncus. Interdum est elit interdum vulputate elementum, molestie odio id iaculis, eius wisi tellus commodo. Et purus dictumst mauris, tortor vel aptent posuere, quis lectus quam, euismod porta dolor aliquam veniam. Quisque porta. Est amet eget donec id, ullamcorper placerat wisi vivamus lectus.</p>
<p align="justify">
Suspendisse at lorem in sed, platea pellentesque quis eu. Proin litora diam cillum, mauris leo illo donec a, numquam eget, diam amet vestibulum ultricies sollicitudin. Sit donec, id lectus integer eu donec. Tortor elit aliquet donec aliquam inceptos, nulla sed id nulla, quisque elit nunc, dui nulla justo orci, vel elit rhoncus tellus ut laoreet. Sodales nisl posuere, congue mi dolor maecenas, et ridiculus sapien, feugiat lacus amet, nunc mauris turpis wisi in ac urna. Ac nisl etiam bibendum hendrerit, nostra mi bibendum dolor eget blandit, a vel pharetra massa.</p>
<p align="justify">
Turpis wisi rutrum sit ridiculus tellus, nunc massa turpis suscipit vestibulum duis, etiam dui id massa diam nunc, dolor quis sit lorem lectus. Nibh hac, consequatur eros tincidunt elit id ac libero, quam fermentum ipsum amet fringilla, dui mattis nunc. Quis augue. Ridiculus scelerisque amet parturient consequat, nisl cursus tellus lectus nec, imperdiet lectus mauris id tellus, mollis at.<sup>3</sup><span class="footnote-text">This footnote is going to be really long. So long, in fact, that it would otherwise collide with the footnote that follows it if we hadn't provided the proper solution. As you'll see here, this won't happen!</span> Non fusce eget, auctor ultrices pretium vehicula, ligula sem ultricies hendrerit et. Gravida et lectus, non eros dictumst ipsum autem risus, semper a suspendisse ut.<sup>4</sup><span class="footnote-text">Here is another footnote that would have otherwise collided with the one preceding it. Because Grantnotes knows not to let this happen, this note should be displaying directly below the one before it.</span> Volutpat malesuada sed lorem wisi suspendisse delectus, nisl vitae porta et per. Est erat luctus vel, elit dictum tincidunt, mauris quisque imperdiet per augue in. Lacus felis sit est mi sed eget, pede vehicula velit urna erat at ut, potenti ac turpis vestibulum orci. Venenatis nulla, risus elit sed maecenas. In duis, aenean pellentesque tellus duis parturient, scelerisque laoreet est.</p>
<p align="justify">
Magnis integer lectus non nam, quis orci neque ante habitasse ultrices, in augue auctor porta scelerisque, purus cursus pellentesque, ut consequat bibendum sed mauris curabitur pede. Magnis diam non ultrices, est praesent cursus scelerisque neque. Non laoreet fringilla vestibulum mauris, velit eros ligula venenatis nisl purus in, taciti nulla nullam pellentesque porttitor. Urna mi dui urna ante. Elementum lorem in lacinia, culpa libero, nulla arcu et diam diam. Sollicitudin vel sodales urna, morbi tincidunt velit massa sed ultricies. Felis morbi arcu ullamcorper, est vitae non est at, et nisl metus conubia nunc quam ligula, vitae quis magna pharetra.</p>
<p align="justify">
Pede wisi augue sapien, dolor imperdiet orci vitae faucibus nulla commodo, orci feugiat convallis. Ante massa ornare venenatis laboris leo vestibulum, lectus congue posuere felis vitae nibh, mauris sed odio a nunc volutpat. Elit tortor libero, sollicitudin fermentum sed consequat mollis, leo iaculis. Nunc neque congue, non risus interdum quam pretium integer leo, sed est est vehicula lacinia, nisl in laoreet, wisi fusce viverra amet fusce. Ac non elit adipiscing nulla tellus ante, tristique quam justo dolor ut ut, egestas elit dolor nibh amet excepteur aliquam, malesuada ante amet accumsan accumsan, tempor suspendisse. Et torquent nullam cursus vitae, quis massa a cursus commodo, diam pretium fermentum erat dui est condimentum. Pharetra iaculis ligula arcu proin, cras vitae at turpis ut, blandit laoreet non eget ad integer, eget nulla gravida malesuada at at. Dolor eu, phasellus aliquam, et a leo libero vulputate nisl mauris, auctor leo urna magna aliquam non, amet fames enim. Metus sed neque quam lacus a, a ligula. Augue urna turpis, nec ac vel sed posuere. Convallis nulla mi, pellentesque vitae id.</p>
<p align="justify">
Eget viverra praesent sapien a aliquam, est metus nonummy hymenaeos elit massa.<sup>5</sup><span class="footnote-text">This is a note at the bottom of the page. It can also have its own <em> formatting</em></span> Ut felis turpis ut a, vel maecenas ratione, id nullam nec nec in. Ante morbi sed ac venenatis, maecenas nunc sapien quis etiam, ultrices consectetuer gravida arcu sapien ac, erat a tristique mauris. Nunc urna et massa, suspendisse ut. A arcu ligula dolor, vestibulum nam eleifend venenatis, nullam ac hendrerit et, feugiat id, dui vel urna elit nisl. Leo tempor penatibus lectus ut dictum eget. Sit nibh. Wisi curabitur sed maecenas et, sed sed molestie cras, mattis voluptate ut sed suspendisse tristique, ab facilisis volutpat feugiat molestie libero a, luctus aenean pede praesent.</p>
<p align="justify">
</p>
</article>
<div id="ad-space">Here is where some other content would go. The footnotes should adjust to start right below this regardless of the note position in the main text, then pick up again aligning properly once space is available</div>
<div class="footnote-bar"></div><!-- .footnote-bar -->
</div><!-- .entry-content -->
</body>
</html>