aboutsummaryrefslogtreecommitdiff
path: root/tools/template.html
blob: f228f12e96045194743107615398309cdc6f90d3 (plain)
  1. <!DOCTYPE html>
  2. <html lang="en">
  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: #ffffff;
  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.number:after { content: "  " }
  23. span.space:after {
  24. content: "·";
  25. position: absolute;
  26. /* create a mark that indicates a space (trick from D. Greenspan) */
  27. top: 0; bottom: 7px; left: 1px; right: 1px;
  28. color: #aaaaaa;
  29. }
  30. div.example { overflow: hidden; }
  31. p { text-align: justify; }
  32. pre { padding: 0.5em; margin: 0.2em 0 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. .example { font-size: 0; /* hack to get width: 50% to work on inline-block */
  43. padding-bottom: 6pt; }
  44. .column pre { font-size: 11pt; padding: 2pt 6pt; }
  45. div.examplenum { font-size: 11pt; text-align: left; margin-bottom: 10px; }
  46. div.column { display: inline-block; width: 50%; vertical-align: top; }
  47. div.example > div:nth-child(2) { clear:left; background-color: #d3e1e4; }
  48. div.example > div:nth-child(3) { clear:right; background-color: #c9cace; }
  49. #watermark {
  50. position: fixed;
  51. bottom: 0;
  52. left: 0;
  53. padding: 1em;
  54. width: 100%;
  55. font-size: 120%;
  56. opacity: 0.7;
  57. z-index: 99;
  58. color: white;
  59. }
  60. #watermark a { color: white; }
  61. a.dingus {
  62. margin-left: 1em;
  63. cursor: pointer;
  64. line-height: 30px;
  65. padding: 4px 7px;
  66. color: #ffffff;
  67. background-color: #33c3f0;
  68. box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
  69. border-color: #4fcaef;
  70. border-bottom: 2px #2a9ec1 solid;
  71. border-right: 2px #2a9ec1 solid;
  72. }
  73. a.footnoteRef > sup:before {
  74. content: "[";
  75. }
  76. a.footnoteRef > sup:after {
  77. content: "]";
  78. }
  79. a.footnoteRef > sup {
  80. vertical-align: baseline;
  81. font-size: 100%;
  82. }
  83. @media print {
  84. @page {
  85. size: auto;
  86. margin: 1.2in 1.2in 1.2in 1.2in;
  87. }
  88. body {
  89. margin: 0;
  90. line-height: 1.2;
  91. font-size: 10pt;
  92. }
  93. .column pre { font-size: 9pt; }
  94. div.examplenum { font-size: 9pt; }
  95. a.dingus { display: none; }
  96. }
  97. </style>
  98. <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  99. <script type="text/javascript">
  100. $$(document).ready(function() {
  101. $$("div.example").each(function(e) {
  102. var t = $$(this).find('code.language-markdown').text();
  103. $$(this).find('a.dingus').click(function(f) {
  104. window.open('/dingus/?text=' +
  105. encodeURIComponent(t.replace(/→/g,"\t")));
  106. });
  107. });
  108. $$("code.language-markdown").dblclick(function(e) { window.open('/dingus/?text=' +
  109. encodeURIComponent($$(this).text()));
  110. });
  111. });
  112. </script>
  113. </head>
  114. <body>
  115. <h1 class="title">$title$</h1>
  116. <div class="version">Version $version$ ($date$)</div>
  117. <div class="authors">
  118. <span class="author">$author$</span>
  119. </div>
  120. <div class="license">
  121. <a rel="license"
  122. href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative
  123. Commons BY-SA" style="border-width: 0;"
  124. src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"
  125. /></a><br/><span style="display: none;"><span xmlns:dct="http://purl.org/dc/terms/"
  126. href="http://purl.org/dc/dcmitype/Text" property="dct:title"
  127. rel="dct:type">CommonMark Spec</span> by
  128. <a xmlns:cc="http://creativecommons.org/ns#"
  129. href="http://spec.commonmark.org" property="cc:attributionName"
  130. rel="cc:attributionURL">John MacFarlane</a> is licensed under a
  131. <a rel="license"
  132. href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
  133. Commons Attribution-ShareAlike 4.0 International License</a>.</span>
  134. </div>
  135. <div id="watermark"></div>
  136. <div id="TOC">
  137. $toc$
  138. </div>
  139. $body$
  140. </body>
  141. </html>