style.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. body {
  2. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  3. color: #222;
  4. line-height: 1.5;
  5. font-size: 16px;
  6. }
  7. .documentation {
  8. background: #65daa2;
  9. }
  10. .home {
  11. background: #65daa2;
  12. color: #fff!important;
  13. }
  14. .header {
  15. text-align: center;
  16. margin-top: 5em;
  17. }
  18. .logo {
  19. height: 10em;
  20. background-color: #fff;
  21. }
  22. .home h2,
  23. .home h3 {
  24. text-shadow: 0 1px 1px #3a9b6d;
  25. text-shadow: 0 1px 1px rgba(58, 155, 109, 0.37);
  26. }
  27. .home a {
  28. color: #fff!important;
  29. text-decoration: underline;
  30. }
  31. .home h2 {
  32. font-size: 2em;
  33. }
  34. .home h3 {
  35. font-size: 1.5em;
  36. }
  37. .installation {
  38. margin-bottom: 1.5em;
  39. margin-top: 1.5em;
  40. color: #fff;
  41. }
  42. .command, .javascript {
  43. background-color: #3a9b6d;
  44. color: #d6f5e6;
  45. border-radius: 4px;
  46. padding: 0.5em 1.5em;
  47. display: inline-block;
  48. font-size: 1em;
  49. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  50. }
  51. #installation ~ .installation, #usage ~ .usage {
  52. text-align: center;
  53. margin-bottom: 0;
  54. }
  55. .command:before {
  56. content: "$";
  57. margin-right: 0.5em;
  58. }
  59. .button {
  60. background-color: #ff583f;
  61. border-bottom: 4px solid #D7493A;
  62. border-radius: 4px;
  63. padding: 1em 2em;
  64. color: #fff!important;
  65. font-weight: bold;
  66. font-size: 1em;
  67. display: inline-block;
  68. text-decoration: none!important;
  69. }
  70. .button img {
  71. height: 1em;
  72. width: 1em;
  73. transform: translateY(0.1em);
  74. margin-right: 0.5em;
  75. }
  76. .button:hover {
  77. text-decoration: none;
  78. border-bottom: 5px solid #D7493A;
  79. transform: translateY(-1px);
  80. margin-bottom: -1px;
  81. }
  82. .button:active {
  83. text-decoration: none;
  84. border-bottom: 3px solid #D7493A;
  85. transform: translateY(1px);
  86. margin-bottom: 1px;
  87. }
  88. .main {
  89. text-align: center;
  90. max-width: 35em;
  91. text-align: left;
  92. margin: 0 auto;
  93. width: 100%;
  94. text-shadow: 0 1px 1px #3a9b6d;
  95. text-shadow: 0 1px 1px rgba(58, 155, 109, 0.37);
  96. }
  97. .repl {
  98. position: relative;
  99. width: 100%;
  100. max-width: 35em;
  101. height: 10em;
  102. display: flex;
  103. flex-direction: row;
  104. margin: 2em auto;
  105. background: #48be85;
  106. padding: 1em;
  107. border-radius: 4px;
  108. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  109. }
  110. .repl__input,
  111. .repl__output {
  112. position: relative;
  113. text-align: left;
  114. padding: 0;
  115. margin: 0;
  116. width: 50%;
  117. overflow: scroll;
  118. color: #1e7b4f;
  119. }
  120. .repl__arg {
  121. font-weight: bold;
  122. }
  123. .repl__func {
  124. color: #0a291a;
  125. font-weight: bold;
  126. }
  127. .footer {
  128. text-align: center;
  129. text-shadow: 0 1px 1px #3a9b6d;
  130. text-shadow: 0 1px 1px rgba(58, 155, 109, 0.37);
  131. }
  132. .bg-white {
  133. background-color: #fff;
  134. }
  135. h4 {
  136. margin: 20px 0 10px 0;
  137. }
  138. .documentation h3 {
  139. color: #000;
  140. }
  141. .border-bottom {
  142. border-color: #ddd;
  143. }
  144. a {
  145. color: #0D3523;
  146. text-decoration: none;
  147. }
  148. .section__heading {
  149. text-align: center;
  150. color: #fff;
  151. text-shadow: 0 1px 1px #3a9b6d;
  152. text-shadow: 0 1px 1px rgba(58, 155, 109, 0.37);
  153. font-size: 2em;
  154. }
  155. .documentation a[href]:hover {
  156. text-decoration: underline;
  157. }
  158. a:hover {
  159. cursor: pointer;
  160. }
  161. .py1-ul li {
  162. padding: 5px 0;
  163. }
  164. .max-height-100 {
  165. max-height: 100%;
  166. }
  167. section:target h3 {
  168. font-weight:700;
  169. }
  170. .documentation td,
  171. .documentation th {
  172. padding: .25rem .25rem;
  173. }
  174. h1:hover .anchorjs-link,
  175. h2:hover .anchorjs-link,
  176. h3:hover .anchorjs-link,
  177. h4:hover .anchorjs-link {
  178. opacity: 1;
  179. }
  180. .fix-3 {
  181. width: 25%;
  182. max-width: 244px;
  183. }
  184. .fix-3 {
  185. width: 25%;
  186. max-width: 244px;
  187. }
  188. @media (min-width: 52em) {
  189. .fix-margin-3 {
  190. margin-left: 25%;
  191. }
  192. }
  193. .pre, pre, code, .code {
  194. font-family: Source Code Pro,Menlo,Consolas,Liberation Mono,monospace;
  195. font-size: 14px;
  196. }
  197. .fill-light {
  198. background: #F9F9F9;
  199. }
  200. .width2 {
  201. width: 1rem;
  202. }
  203. .input {
  204. font-family: inherit;
  205. display: block;
  206. width: 100%;
  207. height: 2rem;
  208. padding: .5rem;
  209. margin-bottom: 1rem;
  210. border: 1px solid #ccc;
  211. font-size: .875rem;
  212. border-radius: 3px;
  213. box-sizing: border-box;
  214. }
  215. table {
  216. border-collapse: collapse;
  217. }
  218. .prose table th,
  219. .prose table td {
  220. text-align: left;
  221. padding:8px;
  222. border:1px solid #ddd;
  223. }
  224. .prose table th:nth-child(1) { border-right: none; }
  225. .prose table th:nth-child(2) { border-left: none; }
  226. .prose table {
  227. border:1px solid #ddd;
  228. }
  229. .prose-big {
  230. font-size: 18px;
  231. line-height: 30px;
  232. }
  233. .quiet {
  234. opacity: 0.7;
  235. }
  236. .minishadow {
  237. box-shadow: 2px 2px 10px #f3f3f3;
  238. }