web.tmpl 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>{{ if .Name}}{{.Name}} | {{End}}{{.Title}}</title>
  6. <style>
  7. /**
  8. * css reset
  9. * html5 display-role reset
  10. * and default styles
  11. */
  12. html, body, div, span, object, h1, h2, h3, h4, h5,
  13. h6, p, blockquote, pre, a, code, em, img, strong,
  14. dl, ol, ul, li, embed, footer, header, menu, nav,
  15. time, audio, video, progress {
  16. margin: 0;
  17. padding: 0;
  18. border: 0;
  19. font: inherit;
  20. vertical-align: baseline;
  21. }
  22. footer, header, menu, nav {
  23. display: block;
  24. }
  25. audio, canvas, progress, video {
  26. display: inline-block;
  27. vertical-align: baseline;
  28. }
  29. html {
  30. font-family: helvetica;
  31. font-size: 22px;
  32. }
  33. body {
  34. line-height: 1.4;
  35. color: #333;
  36. background-color: #fff;
  37. }
  38. h1 {
  39. font-size: 1.75em;
  40. }
  41. h2 {
  42. font-size: 1.5em;
  43. }
  44. h3 {
  45. font-size: 1.25em;
  46. }
  47. h1, h2, h3, h4, h5, h6 {
  48. font-family: sans-serif, georgia;
  49. margin-top: 20px;
  50. margin-bottom: 12px;
  51. letter-spacing: 2px;
  52. }
  53. h3, h4 {
  54. margin-top: 15px;
  55. margin-bottom: 10px;
  56. }
  57. h5, h6 {
  58. margin-top: 10px;
  59. }
  60. h1, h2 {
  61. font-weight: bolder;
  62. }
  63. h3, h4, strong, b {
  64. font-weight: bold;
  65. }
  66. em {
  67. font-style: italic;
  68. font-weight: 200;
  69. }
  70. blockquote {
  71. font-family: sans-serif, helvetica;
  72. quotes: none;
  73. padding: 10px 20px;
  74. margin: 0 0 20px;
  75. border-left: 5px solid #eee;
  76. font-style: italic;
  77. }
  78. hr {
  79. height: 0;
  80. margin: 20px 0;
  81. border: 0;
  82. border-top: 1px solid #eee;
  83. }
  84. pre {
  85. font-family: monospace;
  86. }
  87. code {
  88. padding: 2px 4px;
  89. font-size: 0.9em;
  90. padding: 0.05em 4px;
  91. border-radius: 4px;
  92. background: #000;
  93. overflow-x: auto;
  94. color: #f8f8f8;
  95. }
  96. pre code {
  97. display: block;
  98. margin: 10px 0;
  99. padding: 0.5em;
  100. }
  101. ul {
  102. list-style: disc;
  103. }
  104. ol {
  105. list-style: decimal;
  106. }
  107. li {
  108. margin-left: 45px;
  109. margin-bottom: 5px;
  110. line-height: 1.25;
  111. }
  112. ul, ol, dl, p {
  113. margin-bottom: 10px;
  114. }
  115. a, a:visited {
  116. color: #337ab7;
  117. }
  118. a:hover, a:active {
  119. background-color: transparent;
  120. text-decoration: underline;
  121. outline: 0;
  122. color: inherit;
  123. }
  124. a:hover, a:focus {
  125. text-decoration: underline;
  126. color: #23527c;
  127. }
  128. a:focus {
  129. outline: thin dotted;
  130. text-decoration: underline;
  131. outline-offset: -2px;
  132. }
  133. h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited,
  134. h4 a, h4 a:visited, strong a, strong a:visited {
  135. color: #444;
  136. text-decoration: underline;
  137. }
  138. img {
  139. display: block;
  140. border: none;
  141. max-width: 100%;
  142. height: auto;
  143. vertical-align: middle;
  144. }
  145. /* containers */
  146. header, .content, footer {
  147. max-width: 980px;
  148. margin: 20px auto;
  149. padding: 0 2%;
  150. }
  151. /* header & navigation */
  152. header>a {
  153. color: #000;
  154. text-decoration: none;
  155. }
  156. header h1 {
  157. margin-bottom: 15px;
  158. }
  159. nav li {
  160. font-size: 1.5em;
  161. line-height: 2;
  162. padding: 0 15px;
  163. list-style: none;
  164. }
  165. /* footer styles */
  166. footer {
  167. text-align: center;
  168. }
  169. /* clearfix */
  170. .group:after {
  171. content: "";
  172. display: table;
  173. clear: both;
  174. }
  175. /* responsive font sizes and link styles */
  176. @media only screen and (min-width: 981px) {
  177. html {
  178. font-size: 19px;
  179. }
  180. }
  181. @media only screen and (min-width: 1200px) {
  182. html {
  183. font-size: 16px;
  184. }
  185. a, a:hover, a:active, a:visited, h1 a, h2 a, h3 a, h4 a, strong a {
  186. text-decoration: none;
  187. }
  188. header h1 {
  189. font-size: 3em;
  190. }
  191. nav li {
  192. display: inline;
  193. }
  194. }
  195. /* for print support */
  196. @media print {
  197. p, ul, ol, li {
  198. orphans: 5;
  199. widows: 3;
  200. }
  201. ul, ol, blockquote, pre, code {
  202. page-break-inside: avoid;
  203. }
  204. h2, h3, h4 {
  205. page-break-after: avoid;
  206. }
  207. html {
  208. font-size: 1em;
  209. }
  210. body {
  211. background: white;
  212. }
  213. .content {
  214. background: transparent;
  215. }
  216. p a[href^="http"]:after, li a[href^="http"]:after {
  217. content: " (" attr(href) ")";
  218. }
  219. }
  220. </style>
  221. </head>
  222. <body>
  223. <header>
  224. <h2><a href='/'>{{.Title}}</a></h2>
  225. </header>
  226. <div class="content">{{.Content}}</div>
  227. <footer>
  228. <p>Created on {{.Date}}{{if .Version}} ({{.Version}}){{end}}</p>
  229. </footer>
  230. </body>
  231. </html>