aboutsummaryrefslogtreecommitdiff
path: root/tools/template.html
blob: 10bbdb53b2f360ef0ffc893b3044d323097cd54b (plain)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>${title}</title>
  6. <style type="text/css">
  7. body { font-family: Helvetica, arial, freesans, clean, sans-serif;
  8. line-height: 1.4;
  9. max-width: 48em;
  10. margin: auto;
  11. color: #333333;
  12. background-color: #fff;
  13. font-size: 13pt;
  14. }
  15. div#TOC ul { list-style: none; }
  16. h1 { font-size: 140%; font-weight: bold; border-top: 1px solid gray; padding-top: 0.5em; }
  17. h2 { font-size: 120%; font-weight: bold; }
  18. h3 { font-size: 110%; font-weight: bold; }
  19. h4 { font-size: 100%; font-weight: bold; }
  20. a.definition { font-weight: bold; }
  21. span.space { position: relative; }
  22. span.space:after {
  23. content: "·";
  24. position: absolute;
  25. /* create a mark that indicates a space (trick from D. Greenspan) */
  26. top: 0px; bottom: 7px; left: 1px; right: 1px;
  27. color: #AAA;
  28. }
  29. div.example { overflow: hidden; }
  30. p { text-align: justify; }
  31. pre { padding: 0.5em; margin-left: 0; margin-right: 0; margin-top: 0.2em;
  32. margin-bottom: 0.5em; font-size: 88%; }
  33. pre {
  34. white-space: pre-wrap; /* css-3 */
  35. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  36. white-space: -pre-wrap; /* Opera 4-6 */
  37. white-space: -o-pre-wrap; /* Opera 7 */
  38. word-wrap: break-word; /* Internet Explorer 5.5+ */
  39. }
  40. code { font-family: monospace; background-color: #D3E1E4; }
  41. pre > code { background-color: transparent; }
  42. div.example > pre { float:left; width: 48%; }
  43. div.example > pre:nth-child(2) { clear:left; background-color: #D3E1E4; }
  44. div.example > pre:nth-child(3) { clear:right; background-color: #C9CaCE; }
  45. #watermark {
  46. position:fixed;
  47. bottom:0px;
  48. left:0px;
  49. padding: 1em;
  50. width: 100%;
  51. font-size: 120%;
  52. opacity:0.7;
  53. z-index:99;
  54. color: white;
  55. }
  56. #watermark a { color: white; }
  57. div.examplenum { font-size: 82%; text-align: left; }
  58. a.dingus { color: red; cursor: pointer; }
  59. a.footnoteRef > sup:before {
  60. content: "[";
  61. }
  62. a.footnoteRef > sup:after {
  63. content: "]";
  64. }
  65. a.footnoteRef > sup {
  66. vertical-align: baseline;
  67. font-size: 100%;
  68. }
  69. </style>
  70. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  71. <script type="text/javascript">
  72. $$(document).ready(function() {
  73. $$("div.example").each(function(e) {
  74. var t = $$(this).find('code.language-markdown').text();
  75. $$(this).find('a.dingus').click(function(f) {
  76. window.open('/dingus.html?text=' +
  77. encodeURIComponent(t.replace(/→/g,"\t")));
  78. });
  79. });
  80. $$("code.language-markdown").dblclick(function(e) { window.open('/dingus.html?text=' +
  81. encodeURIComponent($$(this).find('code').text()));
  82. });
  83. });
  84. </script>
  85. </head>
  86. <body>
  87. <h1 class="title">${title}</h1>
  88. <div class="version">Version ${version} (${date})</div>
  89. <div class="authors">
  90. <span class="author">${author}</span>
  91. </div>
  92. <div class="license">
  93. <a rel="license"
  94. href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative
  95. Commons BY-SA" style="border-width:0"
  96. src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"
  97. /></a><br/><span style="display:none"><span xmlns:dct="http://purl.org/dc/terms/"
  98. href="http://purl.org/dc/dcmitype/Text" property="dct:title"
  99. rel="dct:type">CommonMark Spec</span> by
  100. <a xmlns:cc="http://creativecommons.org/ns#"
  101. href="http://spec.commonmark.org" property="cc:attributionName"
  102. rel="cc:attributionURL">John MacFarlane</a> is licensed under a
  103. <a rel="license"
  104. href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
  105. Commons Attribution-ShareAlike 4.0 International License</a>.</span>
  106. </div>
  107. <div id="watermark"></div>
  108. ${body}
  109. </body>
  110. </html>