Skip to content

Instantly share code, notes, and snippets.

@kategolden
kategolden / gist:6012c745ce1e09b558a9
Last active August 29, 2015 14:18
How WCIJ made footnotes that expand to annotations upon clicking (Largo Project website)
/* Start by defining some CSS for the page. The links are fake (reflink, fauxlink). I started with xkcd tooltip, which pop up and are a defined width, but I realized full-width expanding text would be better for mobile users. */
<style type="text/css"> .ref {position: relative; vertical-align: baseline; } .reflink {color:#0065a4; cursor:pointer; font-size:.7em; font-family: 'ff-dagny-web-pro', Helvetica, Arial, sans-serif; } .fauxlink { color:#0065a4; cursor:pointer; font-family: 'ff-dagny-web-pro', Helvetica, Arial, sans-serif; font-size: .8em;} .refbody { color: #969696; font-size: .7em; font-family: 'ff-dagny-web-pro', Helvetica, Arial, sans-serif;}</style>
<h2>1. Frac sand mining is not fracking.</h2>
<img src="http://wisconsinwatch.org/wp-content/uploads/2015/03/image-number-01.gif" alt="Frac sand mining is not fracking" width="500" height="500" />
A lot of people get this confused. Frac sand mining is not fracking. It is mining for the sand that gets injected into deep wells in the <a href="http:/