style.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
  1. /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2. @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
  3. html {
  4. font-family: sans-serif;
  5. -ms-text-size-adjust: 100%;
  6. -webkit-text-size-adjust: 100%;
  7. }
  8. body {
  9. margin: 0;
  10. }
  11. article,
  12. aside,
  13. details,
  14. figcaption,
  15. figure,
  16. footer,
  17. header,
  18. hgroup,
  19. main,
  20. menu,
  21. nav,
  22. section,
  23. summary {
  24. display: block;
  25. }
  26. audio,
  27. canvas,
  28. progress,
  29. video {
  30. display: inline-block;
  31. vertical-align: baseline;
  32. }
  33. audio:not([controls]) {
  34. display: none;
  35. height: 0;
  36. }
  37. [hidden],
  38. template {
  39. display: none;
  40. }
  41. a {
  42. background-color: transparent;
  43. }
  44. a:active,
  45. a:hover {
  46. outline: 0;
  47. }
  48. abbr[title] {
  49. border-bottom: 1px dotted;
  50. }
  51. b,
  52. strong {
  53. font-weight: bold;
  54. }
  55. dfn {
  56. font-style: italic;
  57. }
  58. h1 {
  59. font-size: 2em;
  60. margin: 0.67em 0;
  61. }
  62. mark {
  63. background: #ff0;
  64. color: #000;
  65. }
  66. small {
  67. font-size: 80%;
  68. }
  69. sub,
  70. sup {
  71. font-size: 75%;
  72. line-height: 0;
  73. position: relative;
  74. vertical-align: baseline;
  75. }
  76. sup {
  77. top: -0.5em;
  78. }
  79. sub {
  80. bottom: -0.25em;
  81. }
  82. img {
  83. border: 0;
  84. }
  85. svg:not(:root) {
  86. overflow: hidden;
  87. }
  88. figure {
  89. margin: 1em 40px;
  90. }
  91. hr {
  92. box-sizing: content-box;
  93. height: 0;
  94. }
  95. pre {
  96. overflow: auto;
  97. }
  98. code,
  99. kbd,
  100. pre,
  101. samp {
  102. font-family: monospace, monospace;
  103. font-size: 1em;
  104. }
  105. button,
  106. input,
  107. optgroup,
  108. select,
  109. textarea {
  110. color: inherit;
  111. font: inherit;
  112. margin: 0;
  113. }
  114. button {
  115. overflow: visible;
  116. }
  117. button,
  118. select {
  119. text-transform: none;
  120. }
  121. button,
  122. html input[type="button"],
  123. input[type="reset"],
  124. input[type="submit"] {
  125. -webkit-appearance: button;
  126. cursor: pointer;
  127. }
  128. button[disabled],
  129. html input[disabled] {
  130. cursor: default;
  131. }
  132. button::-moz-focus-inner,
  133. input::-moz-focus-inner {
  134. border: 0;
  135. padding: 0;
  136. }
  137. input {
  138. line-height: normal;
  139. }
  140. input[type="checkbox"],
  141. input[type="radio"] {
  142. box-sizing: border-box;
  143. padding: 0;
  144. }
  145. input[type="number"]::-webkit-inner-spin-button,
  146. input[type="number"]::-webkit-outer-spin-button {
  147. height: auto;
  148. }
  149. input[type="search"] {
  150. -webkit-appearance: textfield;
  151. box-sizing: content-box;
  152. }
  153. input[type="search"]::-webkit-search-cancel-button,
  154. input[type="search"]::-webkit-search-decoration {
  155. -webkit-appearance: none;
  156. }
  157. fieldset {
  158. border: 1px solid #c0c0c0;
  159. margin: 0 2px;
  160. padding: 0.35em 0.625em 0.75em;
  161. }
  162. legend {
  163. border: 0;
  164. padding: 0;
  165. }
  166. textarea {
  167. overflow: auto;
  168. }
  169. optgroup {
  170. font-weight: bold;
  171. }
  172. table {
  173. border-collapse: collapse;
  174. border-spacing: 0;
  175. }
  176. td,
  177. th {
  178. padding: 0;
  179. }
  180. .highlight table td {
  181. padding: 5px;
  182. }
  183. .highlight table pre {
  184. margin: 0;
  185. }
  186. .highlight .cm {
  187. color: #999988;
  188. font-style: italic;
  189. }
  190. .highlight .cp {
  191. color: #999999;
  192. font-weight: bold;
  193. }
  194. .highlight .c1 {
  195. color: #999988;
  196. font-style: italic;
  197. }
  198. .highlight .cs {
  199. color: #999999;
  200. font-weight: bold;
  201. font-style: italic;
  202. }
  203. .highlight .c,
  204. .highlight .cd {
  205. color: #999988;
  206. font-style: italic;
  207. }
  208. .highlight .err {
  209. color: #a61717;
  210. background-color: #e3d2d2;
  211. }
  212. .highlight .gd {
  213. color: #000000;
  214. background-color: #ffdddd;
  215. }
  216. .highlight .ge {
  217. color: #000000;
  218. font-style: italic;
  219. }
  220. .highlight .gr {
  221. color: #aa0000;
  222. }
  223. .highlight .gh {
  224. color: #999999;
  225. }
  226. .highlight .gi {
  227. color: #000000;
  228. background-color: #ddffdd;
  229. }
  230. .highlight .go {
  231. color: #888888;
  232. }
  233. .highlight .gp {
  234. color: #555555;
  235. }
  236. .highlight .gs {
  237. font-weight: bold;
  238. }
  239. .highlight .gu {
  240. color: #aaaaaa;
  241. }
  242. .highlight .gt {
  243. color: #aa0000;
  244. }
  245. .highlight .kc {
  246. color: #000000;
  247. font-weight: bold;
  248. }
  249. .highlight .kd {
  250. color: #000000;
  251. font-weight: bold;
  252. }
  253. .highlight .kn {
  254. color: #000000;
  255. font-weight: bold;
  256. }
  257. .highlight .kp {
  258. color: #000000;
  259. font-weight: bold;
  260. }
  261. .highlight .kr {
  262. color: #000000;
  263. font-weight: bold;
  264. }
  265. .highlight .kt {
  266. color: #445588;
  267. font-weight: bold;
  268. }
  269. .highlight .k,
  270. .highlight .kv {
  271. color: #000000;
  272. font-weight: bold;
  273. }
  274. .highlight .mf {
  275. color: #009999;
  276. }
  277. .highlight .mh {
  278. color: #009999;
  279. }
  280. .highlight .il {
  281. color: #009999;
  282. }
  283. .highlight .mi {
  284. color: #009999;
  285. }
  286. .highlight .mo {
  287. color: #009999;
  288. }
  289. .highlight .m,
  290. .highlight .mb,
  291. .highlight .mx {
  292. color: #009999;
  293. }
  294. .highlight .sb {
  295. color: #d14;
  296. }
  297. .highlight .sc {
  298. color: #d14;
  299. }
  300. .highlight .sd {
  301. color: #d14;
  302. }
  303. .highlight .s2 {
  304. color: #d14;
  305. }
  306. .highlight .se {
  307. color: #d14;
  308. }
  309. .highlight .sh {
  310. color: #d14;
  311. }
  312. .highlight .si {
  313. color: #d14;
  314. }
  315. .highlight .sx {
  316. color: #d14;
  317. }
  318. .highlight .sr {
  319. color: #009926;
  320. }
  321. .highlight .s1 {
  322. color: #d14;
  323. }
  324. .highlight .ss {
  325. color: #990073;
  326. }
  327. .highlight .s {
  328. color: #d14;
  329. }
  330. .highlight .na {
  331. color: #008080;
  332. }
  333. .highlight .bp {
  334. color: #999999;
  335. }
  336. .highlight .nb {
  337. color: #0086b3;
  338. }
  339. .highlight .nc {
  340. color: #445588;
  341. font-weight: bold;
  342. }
  343. .highlight .no {
  344. color: #008080;
  345. }
  346. .highlight .nd {
  347. color: #3c5d5d;
  348. font-weight: bold;
  349. }
  350. .highlight .ni {
  351. color: #800080;
  352. }
  353. .highlight .ne {
  354. color: #990000;
  355. font-weight: bold;
  356. }
  357. .highlight .nf {
  358. color: #990000;
  359. font-weight: bold;
  360. }
  361. .highlight .nl {
  362. color: #990000;
  363. font-weight: bold;
  364. }
  365. .highlight .nn {
  366. color: #555555;
  367. }
  368. .highlight .nt {
  369. color: #000080;
  370. }
  371. .highlight .vc {
  372. color: #008080;
  373. }
  374. .highlight .vg {
  375. color: #008080;
  376. }
  377. .highlight .vi {
  378. color: #008080;
  379. }
  380. .highlight .nv {
  381. color: #008080;
  382. }
  383. .highlight .ow {
  384. color: #000000;
  385. font-weight: bold;
  386. }
  387. .highlight .o {
  388. color: #000000;
  389. font-weight: bold;
  390. }
  391. .highlight .w {
  392. color: #bbbbbb;
  393. }
  394. .highlight {
  395. background-color: #f8f8f8;
  396. }
  397. * {
  398. box-sizing: border-box;
  399. }
  400. body {
  401. padding: 0;
  402. margin: 0;
  403. font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  404. font-size: 16px;
  405. line-height: 1.5;
  406. color: #e6010c;
  407. background-color: black;
  408. }
  409. a {
  410. color: #ff96aa;
  411. text-decoration: none;
  412. }
  413. a:hover {
  414. text-decoration: underline;
  415. }
  416. .btn {
  417. display: inline-block;
  418. margin-bottom: 1rem;
  419. color: rgb(238, 30, 186);
  420. background-color: rgb(197, 178, 210);
  421. border-color: #0c75fb;
  422. border-style: solid;
  423. border-width: 1px;
  424. border-radius: 0.3rem;
  425. transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  426. }
  427. .btn:hover {
  428. color: rgba(255, 255, 255, 0.8);
  429. text-decoration: none;
  430. background-color: Bisque;
  431. border-color: Bisque;
  432. }
  433. .btn + .btn {
  434. margin-left: 1rem;
  435. }
  436. @media screen and (min-width: 64em) {
  437. .btn {
  438. padding: 0.75rem 1rem;
  439. }
  440. }
  441. @media screen and (min-width: 42em) and (max-width: 64em) {
  442. .btn {
  443. padding: 0.6rem 0.9rem;
  444. font-size: 0.9rem;
  445. }
  446. }
  447. @media screen and (max-width: 42em) {
  448. .btn {
  449. display: block;
  450. width: 100%;
  451. padding: 0.75rem;
  452. font-size: 0.9rem;
  453. }
  454. .btn + .btn {
  455. margin-top: 1rem;
  456. margin-left: 0;
  457. }
  458. }
  459. .page-header {
  460. color: #2cff00;
  461. text-align: center;
  462. background-color: #159957;
  463. background-image: linear-gradient(120deg, #d01c1c, #f7ff00);
  464. }
  465. @media screen and (min-width: 64em) {
  466. .page-header {
  467. padding: 5rem 6rem;
  468. }
  469. }
  470. @media screen and (min-width: 42em) and (max-width: 64em) {
  471. .page-header {
  472. padding: 3rem 4rem;
  473. }
  474. }
  475. @media screen and (max-width: 42em) {
  476. .page-header {
  477. padding: 2rem 1rem;
  478. }
  479. }
  480. .project-name {
  481. margin-top: 0;
  482. margin-bottom: 0.1rem;
  483. }
  484. @media screen and (min-width: 64em) {
  485. .project-name {
  486. font-size: 3.25rem;
  487. }
  488. }
  489. @media screen and (min-width: 42em) and (max-width: 64em) {
  490. .project-name {
  491. font-size: 2.25rem;
  492. }
  493. }
  494. @media screen and (max-width: 42em) {
  495. .project-name {
  496. font-size: 1.75rem;
  497. }
  498. }
  499. .project-tagline {
  500. margin-bottom: 2rem;
  501. font-weight: normal;
  502. opacity: 0.7;
  503. }
  504. @media screen and (min-width: 64em) {
  505. .project-tagline {
  506. font-size: 1.25rem;
  507. }
  508. }
  509. @media screen and (min-width: 42em) and (max-width: 64em) {
  510. .project-tagline {
  511. font-size: 1.15rem;
  512. }
  513. }
  514. @media screen and (max-width: 42em) {
  515. .project-tagline {
  516. font-size: 1rem;
  517. }
  518. }
  519. .main-content {
  520. word-wrap: break-word;
  521. }
  522. .main-content :first-child {
  523. margin-top: 0;
  524. }
  525. @media screen and (min-width: 64em) {
  526. .main-content {
  527. max-width: 64rem;
  528. padding: 2rem 6rem;
  529. margin: 0 auto;
  530. font-size: 1.1rem;
  531. }
  532. }
  533. @media screen and (min-width: 42em) and (max-width: 64em) {
  534. .main-content {
  535. padding: 2rem 4rem;
  536. font-size: 1.1rem;
  537. }
  538. }
  539. @media screen and (max-width: 42em) {
  540. .main-content {
  541. padding: 2rem 1rem;
  542. font-size: 1rem;
  543. }
  544. }
  545. .main-content img {
  546. max-width: 100%;
  547. }
  548. .main-content h1,
  549. .main-content h2,
  550. .main-content h3,
  551. .main-content h4,
  552. .main-content h5,
  553. .main-content h6 {
  554. margin-top: 2rem;
  555. margin-bottom: 1rem;
  556. font-weight: normal;
  557. color: #38ff00;
  558. }
  559. .main-content p {
  560. margin-bottom: 1em;
  561. }
  562. .main-content code {
  563. padding: 2px 4px;
  564. font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  565. font-size: 0.9rem;
  566. color: #567482;
  567. background-color: #f3f6fa;
  568. border-radius: 0.3rem;
  569. }
  570. .main-content pre {
  571. padding: 0.8rem;
  572. margin-top: 0;
  573. margin-bottom: 1rem;
  574. font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
  575. color: #567482;
  576. word-wrap: normal;
  577. background-color: #f3f6fa;
  578. border: solid 1px #dce6f0;
  579. border-radius: 0.3rem;
  580. }
  581. .main-content pre > code {
  582. padding: 0;
  583. margin: 0;
  584. font-size: 0.9rem;
  585. color: #000;
  586. word-break: normal;
  587. white-space: pre;
  588. background: transparent;
  589. border: 0;
  590. }
  591. .main-content .highlight {
  592. margin-bottom: 1rem;
  593. }
  594. .main-content .highlight pre {
  595. margin-bottom: 0;
  596. word-break: normal;
  597. }
  598. .main-content .highlight pre,
  599. .main-content pre {
  600. padding: 0.8rem;
  601. overflow: auto;
  602. font-size: 0.9rem;
  603. line-height: 1.45;
  604. border-radius: 0.3rem;
  605. -webkit-overflow-scrolling: touch;
  606. }
  607. .main-content pre code,
  608. .main-content pre tt {
  609. display: inline;
  610. max-width: initial;
  611. padding: 0;
  612. margin: 0;
  613. overflow: initial;
  614. line-height: inherit;
  615. word-wrap: normal;
  616. background-color: transparent;
  617. border: 0;
  618. }
  619. .main-content pre code:before,
  620. .main-content pre code:after,
  621. .main-content pre tt:before,
  622. .main-content pre tt:after {
  623. content: normal;
  624. }
  625. .main-content ul,
  626. .main-content ol {
  627. margin-top: 0;
  628. }
  629. .main-content blockquote {
  630. padding: 0 1rem;
  631. margin-left: 0;
  632. color: #819198;
  633. border-left: 0.3rem solid #dce6f0;
  634. }
  635. .main-content blockquote > :first-child {
  636. margin-top: 0;
  637. }
  638. .main-content blockquote > :last-child {
  639. margin-bottom: 0;
  640. }
  641. .main-content table {
  642. display: block;
  643. width: 100%;
  644. overflow: auto;
  645. word-break: normal;
  646. word-break: keep-all;
  647. -webkit-overflow-scrolling: touch;
  648. }
  649. .main-content table th {
  650. font-weight: bold;
  651. }
  652. .main-content table th,
  653. .main-content table td {
  654. padding: 0.5rem 1rem;
  655. border: 1px solid #e9ebec;
  656. }
  657. .main-content dl {
  658. padding: 0;
  659. }
  660. .main-content dl dt {
  661. padding: 0;
  662. margin-top: 1rem;
  663. font-size: 1rem;
  664. font-weight: bold;
  665. }
  666. .main-content dl dd {
  667. padding: 0;
  668. margin-bottom: 1rem;
  669. }
  670. .main-content hr {
  671. height: 2px;
  672. padding: 0;
  673. margin: 1rem 0;
  674. background-color: #eff0f1;
  675. border: 0;
  676. }
  677. .site-footer {
  678. padding-top: 2rem;
  679. margin-top: 2rem;
  680. border-top: solid 1px #eff0f1;
  681. }
  682. @media screen and (min-width: 64em) {
  683. .site-footer {
  684. font-size: 1rem;
  685. }
  686. }
  687. @media screen and (min-width: 42em) and (max-width: 64em) {
  688. .site-footer {
  689. font-size: 1rem;
  690. }
  691. }
  692. @media screen and (max-width: 42em) {
  693. .site-footer {
  694. font-size: 0.9rem;
  695. }
  696. }
  697. .site-footer-owner {
  698. display: block;
  699. font-weight: bold;
  700. }
  701. .site-footer-credits {
  702. color: #819198;
  703. }