Skip to content

Instantly share code, notes, and snippets.

@bdesham

bdesham/bigfoot-and-mathjax.html

Last active August 29, 2015 14:03
Show Gist options
  • Save bdesham/6325e6d272913eb79c07 to your computer and use it in GitHub Desktop.
Save bdesham/6325e6d272913eb79c07 to your computer and use it in GitHub Desktop.
Download ZIP
MathJax and Bigfoot test
Raw
bigfoot-and-mathjax.html
<!DOCTYPE html>
<html>
<head>
<title>MathJax and Bigfoot test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="bigfoot-default.css"/>
<script src="https://raw.githubusercontent.com/lemonmade/bigfoot/master/dist/bigfoot.js"></script>
<script> $.bigfoot(); </script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ['input/TeX', 'output/HTML-CSS', 'output/NativeMML'],
tex2jax: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true
},
extensions: ['MathMenu.js', 'MathZoom.js', 'tex2jax.js']
});
</script>
<script src="http://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js"></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.<sup id="fnref:footnote">
<a href="#fn:footnote" class="footnote-ref">1</a></sup> Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>Let $f$ be an odd function; then</p>
$$
e^{i \pi} + 1 = \int_{-a}^a f(x) \:\mathrm{d}x , \quad a \in \mathbb{R} .
$$
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:footnote">
<p>In 1995 Wiles completed his proof that no three integers $a$, $b$,
and $c$ satisfy $a^n + b^n = c^n$ if $n \geq 3$.&#160;
<a href="#fnref:footnote" class="footnote-backref">&#8617;</a></p>
</li>
</ol>
</div>
</body>
</html>
Raw
bigfoot-default.css
/*
* This is just the file that comes in the Bigfoot distribution; I'm including it here because it can't be served directly from GitHub
*/
.footnote-container {
display: inline-block;
position: relative;
text-indent: 0;
}
.footnote-button {
position: relative;
z-index: 5;
top: -0.15em;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: inline-block;
padding: 0.34em;
margin: 0 0.1em 0 0.2em;
border: none;
border-radius: 0.3em;
cursor: pointer;
opacity: 0.3;
background-color: #464646;
-webkit-backface-visibility: hidden;
line-height: 0;
vertical-align: middle;
text-decoration: none;
font-smoothing: antialiased;
-webkit-transition: opacity;
-moz-transition: opacity;
-ms-transition: opacity;
transition: opacity;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.footnote-button:hover {
opacity: 0.6;
}
.footnote-button:active {
opacity: 0.6;
}
.footnote-button.active {
opacity: 0.9;
-webkit-transition-delay: 0.15s;
-moz-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.footnote-circle {
display: inline-block;
width: 0.32em;
height: 0.32em;
margin-right: 0.224em;
border-radius: 100%;
background-color: #e6e6e6;
border: none;
}
.footnote-circle:last-child {
margin-right: 0;
}
@media not print {
.footnote-print-only {
display: none !important;
}
}
@media print {
.footnote-button {
display: none !important;
}
}
.footnote-content {
position: absolute;
z-index: 10;
top: 0;
left: 0;
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
max-width: 90%;
margin: 1.81924em 0;
display: inline-block;
background: #fafafa;
opacity: 0;
border-radius: 0.5em;
border: 1px solid #c3c3c3;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-transition: opacity, -webkit-transform;
-moz-transition: opacity, -moz-transform;
-ms-transition: opacity, -ms-transform;
transition: opacity, transform;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.footnote-content:not(.fixed-bottom) {
-webkit-transform: scale(0.1) translateZ(0);
-moz-transform: scale(0.1) translateZ(0);
-ms-transform: scale(0.1) translateZ(0);
-o-transform: scale(0.1) translateZ(0);
transform: scale(0.1) translateZ(0);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.footnote-content.top {
top: auto;
bottom: 0.2em;
}
.footnote-content.active:not(.fixed-bottom) {
-webkit-transform: scale(1) translateZ(0);
-moz-transform: scale(1) translateZ(0);
-ms-transform: scale(1) translateZ(0);
-o-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 0.97;
}
.footnote-content.fixed-bottom {
bottom: 0 !important;
top: auto !important;
left: 0 !important;
width: 100%;
max-width: 100%;
margin: 0;
-webkit-transform: translateY(105%);
-moz-transform: translateY(105%);
-ms-transform: translateY(105%);
-o-transform: translateY(105%);
transform: translateY(105%);
border-radius: 0;
opacity: 1;
-webkit-transition: -webkit-transform;
-moz-transition: -moz-transform;
-ms-transition: -ms-transform;
transition: transform;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.footnote-content.fixed-bottom.active {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.footnote-content.fixed-bottom .footnote-main-wrapper {
max-width: 90%;
width: 22em;
margin: 0 auto;
}
.footnote-content.fixed-bottom .bigfoot-tooltip {
display: none;
}
.footnote-content.scrollable:after {
content: '...';
position: fixed;
bottom: 0.45em;
right: 50%;
z-index: 20;
width: 1.5em;
margin-right: -0.75em;
opacity: 1;
background-color: #fafafa;
font-family: Georgia;
font-weight: bold;
font-size: 1.8em;
text-align: center;
color: rgba(0, 0, 0, 0.08);
line-height: 0;
-webkit-transition: opacity;
-moz-transition: opacity;
-ms-transition: opacity;
transition: opacity;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.footnote-content.scrollable.fully-scrolled:after {
opacity: 0;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
.footnote-content.scrollable .footnote-main-wrapper:before, .footnote-content.scrollable .footnote-main-wrapper:after {
content: ' ';
position: absolute;
width: 100%;
z-index: 12;
}
.footnote-content.scrollable .footnote-main-wrapper:before {
top: -1px;
left: 0;
height: 1.1em;
border-radius: 0.5em 0.5em 0 0;
background: #fafafa;
background: -moz-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0)));
background: -webkit-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: -o-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: -ms-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: linear, to bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%;
}
.footnote-content.scrollable .footnote-main-wrapper:after {
bottom: -1px;
left: 0;
height: 1.2em;
border-radius: 0 0 0.5em 0.5em;
background: #fafafa;
background: -moz-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0)));
background: -webkit-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: -o-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: -ms-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background: linear, to top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%;
}
.footnote-content ::-webkit-scrollbar {
display: none;
}
.footnote-main-wrapper {
position: relative;
z-index: 14;
width: 22em;
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
margin: 0;
background-color: #fafafa;
border-radius: 0.5em;
-webkit-transition: max-height;
-moz-transition: max-height;
-ms-transition: max-height;
transition: max-height;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.footnote-content-wrapper {
position: relative;
z-index: 8;
display: inline-block;
max-height: 15em;
padding: 1.1em 1.3em 1.2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #fafafa;
border-radius: 0.5em;
-webkit-font-smoothing: subpixel-antialiased;
}
.footnote-content-wrapper img {
max-width: 100%;
}
.footnote-content-wrapper *:last-child {
margin-bottom: 0;
}
.footnote-content-wrapper *:first-child {
margin-top: 0;
}
.bigfoot-tooltip {
position: absolute;
z-index: 12;
box-sizing: border-box;
-moz-box-sizing: border-box;
margin-left: -0.65em;
width: 1.3em;
height: 1.3em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: #fafafa;
border: 1px solid #c3c3c3;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
border-top-left-radius: 0;
}
.bottom .bigfoot-tooltip {
top: -0.65em;
bottom: auto;
}
.top .bigfoot-tooltip {
bottom: -0.65em;
top: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment