Last active
August 29, 2015 14:03
-
-
Save bdesham/6325e6d272913eb79c07 to your computer and use it in GitHub Desktop.
MathJax and Bigfoot test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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$.  | |
| <a href="#fnref:footnote" class="footnote-backref">↩</a></p> | |
| </li> | |
| </ol> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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