cayman.css 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. * {
  2. box-sizing: border-box; }
  3. body {
  4. padding: 0;
  5. margin: 0;
  6. font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  7. font-size: 16px;
  8. line-height: 1.5;
  9. color: #606c71; }
  10. a {
  11. color: #1e6bb8;
  12. text-decoration: none; }
  13. a:hover {
  14. text-decoration: underline; }
  15. .btn {
  16. display: inline-block;
  17. margin-bottom: 1rem;
  18. color: rgba(255, 255, 255, 0.7);
  19. background-color: rgba(255, 255, 255, 0.08);
  20. border-color: rgba(255, 255, 255, 0.2);
  21. border-style: solid;
  22. border-width: 1px;
  23. border-radius: 0.3rem;
  24. transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
  25. .btn:hover {
  26. color: rgba(255, 255, 255, 0.8);
  27. text-decoration: none;
  28. background-color: rgba(255, 255, 255, 0.2);
  29. border-color: rgba(255, 255, 255, 0.3); }
  30. .btn + .btn {
  31. margin-left: 1rem; }
  32. @media screen and (min-width: 64em) {
  33. .btn {
  34. padding: 0.75rem 1rem; } }
  35. @media screen and (min-width: 42em) and (max-width: 64em) {
  36. .btn {
  37. padding: 0.6rem 0.9rem;
  38. font-size: 0.9rem; } }
  39. @media screen and (max-width: 42em) {
  40. .btn {
  41. display: block;
  42. width: 100%;
  43. padding: 0.75rem;
  44. font-size: 0.9rem; }
  45. .btn + .btn {
  46. margin-top: 1rem;
  47. margin-left: 0; } }
  48. .page-header {
  49. color: #fff;
  50. text-align: center;
  51. background-color: #159957;
  52. background-image: linear-gradient(120deg, #155799, #159957); }
  53. @media screen and (min-width: 64em) {
  54. .page-header {
  55. padding: 5rem 6rem; } }
  56. @media screen and (min-width: 42em) and (max-width: 64em) {
  57. .page-header {
  58. padding: 3rem 4rem; } }
  59. @media screen and (max-width: 42em) {
  60. .page-header {
  61. padding: 2rem 1rem; } }
  62. .project-name {
  63. margin-top: 0;
  64. margin-bottom: 0.1rem; }
  65. @media screen and (min-width: 64em) {
  66. .project-name {
  67. font-size: 3.25rem; } }
  68. @media screen and (min-width: 42em) and (max-width: 64em) {
  69. .project-name {
  70. font-size: 2.25rem; } }
  71. @media screen and (max-width: 42em) {
  72. .project-name {
  73. font-size: 1.75rem; } }
  74. .project-tagline {
  75. margin-bottom: 2rem;
  76. font-weight: normal;
  77. opacity: 0.7; }
  78. @media screen and (min-width: 64em) {
  79. .project-tagline {
  80. font-size: 1.25rem; } }
  81. @media screen and (min-width: 42em) and (max-width: 64em) {
  82. .project-tagline {
  83. font-size: 1.15rem; } }
  84. @media screen and (max-width: 42em) {
  85. .project-tagline {
  86. font-size: 1rem; } }
  87. .main-content {
  88. word-wrap: break-word; }
  89. .main-content :first-child {
  90. margin-top: 0; }
  91. @media screen and (min-width: 64em) {
  92. .main-content {
  93. max-width: 64rem;
  94. padding: 2rem 6rem;
  95. margin: 0 auto;
  96. font-size: 1.1rem; } }
  97. @media screen and (min-width: 42em) and (max-width: 64em) {
  98. .main-content {
  99. padding: 2rem 4rem;
  100. font-size: 1.1rem; } }
  101. @media screen and (max-width: 42em) {
  102. .main-content {
  103. padding: 2rem 1rem;
  104. font-size: 1rem; } }
  105. .main-content img {
  106. max-width: 100%; }
  107. .main-content h1,
  108. .main-content h2,
  109. .main-content h3,
  110. .main-content h4,
  111. .main-content h5,
  112. .main-content h6 {
  113. margin-top: 2rem;
  114. margin-bottom: 1rem;
  115. font-weight: normal;
  116. color: #159957; }
  117. .main-content p {
  118. margin-bottom: 1em; }
  119. .main-content code {
  120. padding: 2px 4px;
  121. font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  122. font-size: 0.9rem;
  123. color: #567482;
  124. background-color: #f3f6fa;
  125. border-radius: 0.3rem; }
  126. .main-content pre {
  127. padding: 0.8rem;
  128. margin-top: 0;
  129. margin-bottom: 1rem;
  130. font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
  131. color: #567482;
  132. word-wrap: normal;
  133. background-color: #f3f6fa;
  134. border: solid 1px #dce6f0;
  135. border-radius: 0.3rem; }
  136. .main-content pre > code {
  137. padding: 0;
  138. margin: 0;
  139. font-size: 0.9rem;
  140. color: #567482;
  141. word-break: normal;
  142. white-space: pre;
  143. background: transparent;
  144. border: 0; }
  145. .main-content .highlight {
  146. margin-bottom: 1rem; }
  147. .main-content .highlight pre {
  148. margin-bottom: 0;
  149. word-break: normal; }
  150. .main-content .highlight pre,
  151. .main-content pre {
  152. padding: 0.8rem;
  153. overflow: auto;
  154. font-size: 0.9rem;
  155. line-height: 1.45;
  156. border-radius: 0.3rem;
  157. -webkit-overflow-scrolling: touch; }
  158. .main-content pre code,
  159. .main-content pre tt {
  160. display: inline;
  161. max-width: initial;
  162. padding: 0;
  163. margin: 0;
  164. overflow: initial;
  165. line-height: inherit;
  166. word-wrap: normal;
  167. background-color: transparent;
  168. border: 0; }
  169. .main-content pre code:before, .main-content pre code:after,
  170. .main-content pre tt:before,
  171. .main-content pre tt:after {
  172. content: normal; }
  173. .main-content ul,
  174. .main-content ol {
  175. margin-top: 0; }
  176. .main-content blockquote {
  177. padding: 0 1rem;
  178. margin-left: 0;
  179. color: #819198;
  180. border-left: 0.3rem solid #dce6f0; }
  181. .main-content blockquote > :first-child {
  182. margin-top: 0; }
  183. .main-content blockquote > :last-child {
  184. margin-bottom: 0; }
  185. .main-content table {
  186. display: block;
  187. width: 100%;
  188. overflow: auto;
  189. word-break: normal;
  190. word-break: keep-all;
  191. -webkit-overflow-scrolling: touch; }
  192. .main-content table th {
  193. font-weight: bold; }
  194. .main-content table th,
  195. .main-content table td {
  196. padding: 0.5rem 1rem;
  197. border: 1px solid #e9ebec; }
  198. .main-content dl {
  199. padding: 0; }
  200. .main-content dl dt {
  201. padding: 0;
  202. margin-top: 1rem;
  203. font-size: 1rem;
  204. font-weight: bold; }
  205. .main-content dl dd {
  206. padding: 0;
  207. margin-bottom: 1rem; }
  208. .main-content hr {
  209. height: 2px;
  210. padding: 0;
  211. margin: 1rem 0;
  212. background-color: #eff0f1;
  213. border: 0; }
  214. .site-footer {
  215. padding-top: 2rem;
  216. margin-top: 2rem;
  217. border-top: solid 1px #eff0f1; }
  218. @media screen and (min-width: 64em) {
  219. .site-footer {
  220. font-size: 1rem; } }
  221. @media screen and (min-width: 42em) and (max-width: 64em) {
  222. .site-footer {
  223. font-size: 1rem; } }
  224. @media screen and (max-width: 42em) {
  225. .site-footer {
  226. font-size: 0.9rem; } }
  227. .site-footer-owner {
  228. display: block;
  229. text-align:center;
  230. font-weight: bold; }
  231. .site-footer-power {
  232. display: block;
  233. font-size: 0.6rem;
  234. text-align:center;}
  235. .site-footer-credits {
  236. color: #819198; }
  237. .donate {
  238. vertical-align: top;
  239. height: 20px;
  240. border: 1px solid #d4d4d4;
  241. display: inline-block;
  242. box-sizing: border-box;
  243. line-height: 16px;
  244. border-radius: 3px;
  245. cursor: pointer;
  246. background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%);
  247. position: relative;
  248. width: 72px;
  249. }
  250. .donate:hover {
  251. border-color: #ccc;
  252. background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
  253. }
  254. .donate img {
  255. width: 14px;
  256. height: 14px;
  257. position: absolute;
  258. top: 2px;
  259. left: 5px;
  260. }
  261. .donate a {
  262. font: 700 11px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  263. color: #333;
  264. text-shadow: 0 1px 0 #fff;
  265. position: absolute;
  266. top: 2px;
  267. left: 24px;
  268. }
  269. #nav,
  270. #translations {
  271. list-style-type: none;
  272. text-align: center;
  273. padding: 0;
  274. margin: 0;
  275. }
  276. #nav li,
  277. #translations li {
  278. display: inline-block;
  279. position: relative;
  280. line-height: 40px;
  281. }
  282. #nav li:last-child .nav-link,
  283. #translations li:last-child .nav-link {
  284. margin-right: 0;
  285. }
  286. #translations {
  287. margin-bottom: 0em;
  288. }
  289. #translations .delimiter {
  290. color: #7f8c8d;
  291. margin: 0 5px;
  292. }
  293. #translations .nav-link {
  294. margin: 0;
  295. }
  296. .nav-link {
  297. color: #7f8c8d;
  298. padding-bottom: 3px;
  299. margin: 0 1.5em;
  300. }
  301. .nav-link:first-child {
  302. margin-left: 0;
  303. }
  304. .nav-link:hover,
  305. .nav-link.current {
  306. border-bottom: 3px solid #42b983;
  307. }