Mobile-responsive personal website, generated using Hugo. https://kevin-mok.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1154 lines
22 KiB

2 years ago
2 years ago
5 months ago
5 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
5 months ago
2 years ago
5 months ago
2 years ago
5 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
5 months ago
2 years ago
5 months ago
5 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
5 months ago
5 months ago
5 months ago
5 months ago
2 years ago
2 years ago
2 years ago
  1. /* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
  2. // base colors {{{ //
  3. $base02: #515151;
  4. $base03: #747369;
  5. $base04: #a09f93;
  6. $base05: #d3d0c8;
  7. $base-red: #f2777a;
  8. $base-orange: #f99157;
  9. $base-yellow: #ffcc66;
  10. $base-green: #99cc99;
  11. $base-sky-blue: #66cccc;
  12. $base-blue: #6699cc;
  13. $base-violet: #cc99cc;
  14. $base-dark-orange: #d27b53;
  15. /* .base00 { color: #2d2d2d; }
  16. .base01 { color: #393939; }
  17. .base02 { color: #515151; }
  18. .base03 { color: #747369; }
  19. .base04 { color: #a09f93; }
  20. .base06 { color: #e8e6df; }
  21. .base07 { color: #f2f0ec; } */
  22. .base08 { color: $base-red; }
  23. .base09 { color: $base-orange; }
  24. .base0a { color: $base-yellow; }
  25. .base0b { color: $base-green; }
  26. .base0c { color: $base-sky-blue; }
  27. .base0d { color: $base-blue; }
  28. .base0e { color: $base-violet; }
  29. .base0f { color: $base-dark-orange; }
  30. // }}} base colors //
  31. // mixins {{{ //
  32. // $max-page-width: 52em;
  33. $max-page-width: 45em;
  34. $phone-width: 800px;
  35. @mixin side-padding-rem($n) {// {{{
  36. padding-left: $n * 1rem;
  37. padding-right: $n * 1rem;
  38. }// }}}
  39. @mixin side-margin-em($n) {// {{{
  40. margin-left: $n * 1em;
  41. margin-right: $n * 1em;
  42. }// }}}
  43. @mixin vert-padding-rem($n) {// {{{
  44. padding-top: $n * 1rem;
  45. padding-bottom: $n * 1rem;
  46. }// }}}
  47. @mixin vert-margin-rem($n) {// {{{
  48. margin-top: $n * 1rem;
  49. margin-bottom: $n * 1rem;
  50. }// }}}
  51. @mixin auto-center() {// {{{
  52. margin-left: auto;
  53. margin-right: auto;
  54. }// }}}
  55. @mixin article-body() {// {{{
  56. /* background-color: #e6e6fa; */
  57. background-color: #cbbeb5;
  58. color: #2d2d2d;
  59. @include side-padding-rem(8);
  60. @include vert-padding-rem(1);
  61. /* min-height: 50%; */
  62. /* min-height: 30em; */
  63. @media (max-width: $max-page-width) {
  64. @include side-padding-rem(2);
  65. }
  66. }// }}}
  67. @mixin a-color($color) {// {{{
  68. a {
  69. color: $color;
  70. &:visited {
  71. color: $color;
  72. }
  73. &:active {
  74. color: $color;
  75. }
  76. }
  77. }// }}}
  78. // }}} mixins //
  79. // general elements {{{ //
  80. // $background-color: #2d2d2d;
  81. // $color: #f2f0ec;
  82. $background-color: white;
  83. $color: black;
  84. body {
  85. margin: 0;
  86. background-color: $background-color;
  87. color: $color;
  88. line-height: 1.5;
  89. // font-size: 100%;
  90. // font-size: 15px;
  91. font-size: 17px;
  92. // font-size: 20px;
  93. /* font-family: 'Source Code Pro', monospace; */
  94. // font-family: 'Hack', monospace;
  95. // body {
  96. // font-family: 'Times New Roman', serif;
  97. font-family: "Computer Modern Serif";
  98. // }
  99. display: flex;
  100. flex-direction: column;
  101. min-height: 100vh;
  102. @include a-color($base-sky-blue);
  103. }
  104. .container {
  105. max-width: $max-page-width;
  106. margin-left: auto;
  107. margin-right: auto;
  108. flex: 1;
  109. @media (max-width: $max-page-width) {
  110. width: 100%;
  111. }
  112. }
  113. div {
  114. .right {
  115. float:right;
  116. }
  117. .clearfix {
  118. overflow: auto;
  119. }
  120. }
  121. article {
  122. .single {
  123. section {
  124. @include article-body();
  125. }
  126. }
  127. }
  128. .article-list {
  129. article {
  130. @include article-body();
  131. }
  132. }
  133. header {
  134. margin-top: 1.5rem;
  135. margin-bottom: 1rem;
  136. @media (max-width: $max-page-width) {
  137. margin-top: 0;
  138. @include side-padding-rem(2);
  139. }
  140. }
  141. footer {
  142. // base {{{ //
  143. @include a-color(#747369);
  144. // background-color: #393939;
  145. // max-width: $max-page-width;
  146. margin-top: 2rem;
  147. $vertical-margin: .2em;
  148. text-align: center;
  149. font-size: 0.8em;
  150. color: #747369;
  151. // bottom: 0;
  152. // position: absolute;
  153. // width: 100%;
  154. // }}} base //
  155. .container {// {{{
  156. // max-width: $max-page-width;
  157. // min-width: $max-page-width;
  158. @include auto-center();
  159. // @include vert-padding-rem(.1);
  160. @include side-padding-rem(0);
  161. #footer-row {
  162. // background-color: #393939;
  163. }
  164. #footer-content {
  165. $side-padding: 2.5em;
  166. @include vert-padding-rem(.35);
  167. border-style: solid;
  168. border-width: 1px 0 0 0;
  169. border-color: rgba(81, 81, 81, .75);
  170. #copyright {
  171. // padding-left: .85em;
  172. padding-left: $side-padding;
  173. position: relative;
  174. top: 2px;
  175. @include a-color(#747369);
  176. }
  177. #social-icons {
  178. position: relative;
  179. padding-right: $side-padding;
  180. // padding-right: .9em;
  181. img {
  182. height: 1.5em;
  183. @include vert-margin-rem(.2);
  184. padding-left: .5em;
  185. opacity: .6;
  186. &:hover {
  187. opacity: 1;
  188. }
  189. }
  190. }
  191. }
  192. }// }}}
  193. @media (max-width: $max-page-width) {
  194. margin-top: 0;
  195. margin-bottom: 0;
  196. }
  197. @media (max-width: $phone-width) {
  198. font-size: 0.8em;
  199. }
  200. }
  201. /* Typography */
  202. @for $i from 1 to 6 {
  203. h#{$i} {
  204. font-weight: bold;
  205. line-height: 1.25;
  206. margin-top: 1em;
  207. margin-bottom: .5em;
  208. }
  209. }
  210. p {
  211. margin-top: 0;
  212. margin-bottom: 1rem;
  213. }
  214. // h1 {
  215. // font-size: 2rem;
  216. // @media (max-width: $phone-width) {
  217. // font-size: 1.75rem;
  218. // }
  219. // }
  220. // h2 {
  221. // font-size: 1.5rem;
  222. // @media (max-width: $phone-width) {
  223. // font-size: 1.4rem;
  224. // }
  225. // }
  226. h3 { font-size: 1.25rem }
  227. // h4 { font-size: 1rem }
  228. h5 { font-size: .875rem }
  229. h6 { font-size: .75rem }
  230. pre, code {
  231. font-family: inherit;
  232. font-size: inherit;
  233. }
  234. // }}} general elements //
  235. header {// {{{
  236. a {
  237. .path .path:visited {
  238. color: #6699cc;
  239. }
  240. }
  241. span {
  242. caret {
  243. color: #f2f0ec;
  244. }
  245. }
  246. }// }}}
  247. .page-not-found {// {{{
  248. h1 {
  249. text-align: center;
  250. font-size: 5em;
  251. }
  252. h2 {
  253. text-align: center;
  254. font-size: 3em;
  255. color: $base04;
  256. margin-bottom: 4rem;
  257. }
  258. @media (max-width: $max-page-width) {
  259. h1 {
  260. font-size: 3em;
  261. }
  262. h2 {
  263. font-size: 2em;
  264. }
  265. }
  266. }// }}}
  267. #homepage {// {{{
  268. #about {
  269. font-size: 1.1rem;
  270. h2 {
  271. margin-top: 1.25rem;
  272. // font-size: 2rem;
  273. font-size: 1.9rem;
  274. color: $base-yellow;
  275. text-align: center;
  276. // @media (max-width: $max-page-width) {
  277. // @include side-padding-rem(2);
  278. // }
  279. }
  280. .me-equation {
  281. margin-top: 3em;
  282. text-align: center;
  283. display: flex;
  284. // display: grid;
  285. // grid-template-columns: repeat(3, 2fr 1fr) 2fr;
  286. justify-content: center; /* align horizontal */
  287. align-items: center; /* align vertical */
  288. .equation-part {
  289. // width: 33%;
  290. display: flex;
  291. flex: 1;
  292. justify-content: center; /* align horizontal */
  293. align-items: center; /* align vertical */
  294. a {
  295. text-decoration: none;
  296. width: 70%;
  297. }
  298. img {
  299. // width: 7em;
  300. width: 70%;
  301. // width: 15vw;
  302. // min-width: 25%;
  303. // height: 25%;
  304. height: 100%;
  305. // height: auto;
  306. // height: 20vw;
  307. // object-fit: contain;
  308. // flex-basis: 20%;
  309. // flex: 2 2 0;
  310. // border-radius: 1.5em;
  311. border-radius: 1.1em;
  312. display: inline;
  313. &#gnu {
  314. background-color: $base04;
  315. // background-color: $base05;
  316. }
  317. }
  318. p {
  319. // font-size: 3rem;
  320. font-size: 3vw;
  321. // width: 20%;
  322. // flex: 1;
  323. // display: inline;
  324. display: inline-block;
  325. @include side-padding-rem(0.2);
  326. }
  327. }
  328. // @media (max-width: 800px) {// {{{
  329. @media (max-width: $phone-width) {
  330. // flex-direction: column;
  331. flex-wrap: wrap;
  332. margin-top: 2em;
  333. justify-content: space-around; /* align horizontal */
  334. // height: 100vh;
  335. // height: 50vh;
  336. .equation-part {
  337. // min-width: 50vw;
  338. // display: inline-block;
  339. // min-width: 50%;
  340. min-width: 33%;
  341. // max-height: 25vh;
  342. // flex-direction: column;
  343. img {
  344. // display: block;
  345. // width: 50%;
  346. flex: 1.5;
  347. // flex: 1;
  348. // height: 50%;
  349. // max-height: 30%;
  350. // max-height: 25vh;
  351. &#hexatar {
  352. // max-width: 70%;
  353. max-width: 20%;
  354. // max-height: 15vh;
  355. // margin-top: 2rem;
  356. margin-top: 1.75rem;
  357. }
  358. }
  359. p {
  360. // font-size: 3rem;
  361. font-size: 6vw;
  362. // width: 20%;
  363. flex: 1;
  364. // @include side-padding-rem(0.2);
  365. }
  366. &#uoft-part {
  367. justify-content: flex-end;
  368. }
  369. }
  370. }
  371. // @media (max-width: $phone-width) {
  372. // margin-top: 2em;
  373. // display: block;
  374. // p {
  375. // display: block;
  376. // @include vert-padding-rem(0.1);
  377. // margin-bottom: 0rem;
  378. // }
  379. // }
  380. }
  381. @media (max-width: $phone-width) {
  382. // font-size: 1.1em;
  383. font-size: .9em;
  384. h1 {
  385. // font-size: 1.75rem;
  386. font-size: 1.4rem;
  387. }
  388. }// }}}
  389. }
  390. @media (max-width: $max-page-width) {
  391. margin-bottom: 2rem;
  392. }
  393. }
  394. /* .homepage section.categories,
  395. .homepage section.tags {
  396. padding-left: 2rem;
  397. padding-right: 2rem;
  398. }
  399. .homepage .category,
  400. .homepage .category a,
  401. .homepage .tag,
  402. .homepage .tag a {
  403. color: #cc99cc;
  404. }
  405. .homepage .tag {
  406. margin-right: 2em;
  407. } */// }}}
  408. #print-icon {// {{{
  409. float: right;
  410. display: none;
  411. img {
  412. height: 1.75em;
  413. position: relative;
  414. top: 1em;
  415. }
  416. }// }}}
  417. #contact-info {// {{{
  418. @include side-margin-em(0);
  419. // @include vert-padding-rem(0.5);
  420. @include a-color($base-sky-blue);
  421. // min-width: $max-page-width;
  422. @media (min-width: 1200px) {
  423. .container{
  424. min-width: $max-page-width;
  425. }
  426. }
  427. a {// {{{
  428. color: #4287cd;
  429. text-decoration: none;
  430. &:hover {
  431. text-decoration: none;
  432. }
  433. }// }}}
  434. font-size: 1.4em;
  435. // font-size: .8em;
  436. .row {
  437. // flex-grow: 1;
  438. // color: $base05;
  439. color: #4287cd;
  440. img {
  441. height: 1em;
  442. // @media (max-width: $phone-width) {
  443. // height: 1.5em;
  444. // }
  445. }
  446. div[class^="col"] {
  447. @include side-padding-rem(0);
  448. // text-align: center;
  449. }
  450. }
  451. .url-info {
  452. margin-left: 5px;
  453. // position: relative;
  454. // left: -8px;
  455. // @media (max-width: $phone-width) {
  456. // // display: none;
  457. // // font-size: 10px;
  458. // font-size: .8em;
  459. // }
  460. }
  461. }// }}}
  462. #resume {// {{{
  463. a {// {{{
  464. // text-decoration: none;
  465. text-decoration: underline;
  466. &:hover {
  467. text-decoration: underline;
  468. }
  469. }// }}}
  470. h1 {// {{{
  471. // color: $base-orange;
  472. color: black;
  473. // margin-top: 1.3rem;
  474. margin-top: 1rem;
  475. font-size: 1.2em;
  476. // @media (max-width: $phone-width) {
  477. // margin-top: .75rem;
  478. // }
  479. }// }}}
  480. h2 {// {{{
  481. color: $base-orange;
  482. margin-top: .5rem;
  483. font-size: 1em;
  484. // @media (max-width: $phone-width) {
  485. // font-size: 1.2em;
  486. // margin-top: .75rem;
  487. // }
  488. }// }}}
  489. h4 {// {{{
  490. color: $base-yellow;
  491. margin-top: .5rem;
  492. font-size: 1.2em;
  493. // @media (max-width: $phone-width) {
  494. // font-size: 1.2em;
  495. // margin-top: .75rem;
  496. // }
  497. }// }}}
  498. .date {// {{{
  499. float: right;
  500. color: $base03;
  501. // @media (max-width: $phone-width) {
  502. // padding-top: 0em;
  503. // }
  504. }// }}}
  505. ul {
  506. margin-bottom: 5px;
  507. }
  508. #projects {// {{{
  509. // // h1 {
  510. // // margin-bottom: 3px;
  511. // // }
  512. .project {// {{{
  513. @include vert-padding-rem(.2);
  514. h2 {
  515. color: $base-sky-blue;
  516. display: inline;
  517. }
  518. img {
  519. height: 1.2em;
  520. }
  521. .project-header {
  522. // margin-bottom: .6em;
  523. // margin-bottom: .1em;
  524. margin-bottom: 5px;
  525. }
  526. .project-title {
  527. // color: $base-blue;
  528. color: black;
  529. }
  530. .project-link {
  531. &:hover {
  532. text-decoration: none;
  533. }
  534. }
  535. .down-triangle {
  536. // fill: blue;
  537. height: 1.2em;
  538. position: relative;
  539. top: -3px;
  540. left: -3px;
  541. }
  542. .btn {// {{{
  543. display: inline;
  544. background-color: transparent;
  545. margin-bottom: 5px;
  546. padding-left: 7px;
  547. &:focus, &:active {
  548. outline: none !important;
  549. box-shadow: none;
  550. }
  551. }// }}}
  552. // }}}
  553. // [id^="details-"] {
  554. // margin-top: .5em;
  555. // }
  556. }
  557. }// }}}
  558. .company {
  559. // color: #fe4646;
  560. color: black;
  561. font-weight: bold;
  562. font-size: 1.2em;
  563. margin-bottom: 5px;
  564. }
  565. .position {
  566. // color: black;
  567. // color: $base-sky-blue;
  568. // color: $base-blue;
  569. color: black;
  570. font-weight: bold;
  571. // font-style: italic;
  572. // font-size: 1.1em;
  573. font-size: 1em;
  574. // margin-bottom: 5px;
  575. margin-bottom: 15px;
  576. }
  577. .institution {
  578. // color: $base-yellow;
  579. // color: $base-dark-orange;
  580. // color: $base-blue;
  581. color: black;
  582. font-weight: bold;
  583. font-size: 1.1em;
  584. margin-bottom: 5px;
  585. }
  586. .title {
  587. font-style: italic;
  588. }
  589. #education {// {{{
  590. .date {
  591. padding-top: 0;
  592. }
  593. }// }}}
  594. // @media (max-width: $phone-width) {
  595. // font-size: 14px;
  596. // // font-size: 1em;
  597. // }
  598. &.letter {
  599. font-size: 1.4em;
  600. // font-size: 2em;
  601. margin-top: 2em;
  602. line-height: 1.5em;
  603. img {
  604. height: 4.5em;
  605. }
  606. h2 {
  607. color: $base-red;
  608. margin-top: 0em;
  609. margin-bottom: .4em;
  610. }
  611. p {
  612. margin-bottom: 1em;
  613. }
  614. .no-line-spacing {
  615. line-height: .5em;
  616. margin-bottom: 1.75em;
  617. p {
  618. margin-bottom: 1em;
  619. }
  620. }
  621. }
  622. }// }}}
  623. #server {// {{{
  624. .body {
  625. @include vert-padding-rem(.5);
  626. }
  627. h1 {
  628. margin-bottom: .25em;
  629. }
  630. // table {
  631. // margin-top: 1.75em;
  632. // }
  633. th, td {
  634. @include vert-padding-rem(.4);
  635. @include side-padding-rem(.5);
  636. border: 1px solid rgba(160, 159, 147, .5);
  637. }
  638. th {
  639. color: $base-orange;
  640. text-align: center;
  641. font-size: 1.3em;
  642. }
  643. td {
  644. font-size: .9em;
  645. }
  646. .description {
  647. font-size: .85em;
  648. }
  649. .status {
  650. text-align: center;
  651. img {
  652. height: 2em;
  653. }
  654. }
  655. #time-info {
  656. padding-top: 1em;
  657. font-size: .75em;
  658. font-style: italic;
  659. color: $base03;
  660. }
  661. }// }}}
  662. // TODO: converted up to here
  663. // hero {{{ //
  664. h1.site-title {// {{{
  665. text-align: center;
  666. // font-size: 4.2em;
  667. // font-size: 3.2em;
  668. font-size: 2.5em;
  669. // color: #66cccc;
  670. color: $base05;
  671. // margin-top: 1rem;
  672. // margin-bottom: 0.75rem;
  673. @include vert-margin-rem(.75);
  674. // @include a-color($base-sky-blue);
  675. a {
  676. color: black;
  677. // text-decoration: none;
  678. text-decoration: underline;
  679. text-decoration-thickness: 2px;
  680. text-underline-offset: 5px;
  681. }
  682. // @media (max-width: $phone-width) {
  683. // font-size: 3em;
  684. // }
  685. // @media (max-width: $phone-width) {
  686. // font-size: 3.5em;
  687. // @include vert-margin-rem(.3);
  688. // // font-size: 2.5em;
  689. // // font-size: 2em;
  690. // .surrounding {
  691. // display: none;
  692. // }
  693. // }
  694. }// }}}
  695. .hero-logo img {
  696. margin-top: 0.5rem;
  697. width: 100%;
  698. // display: none;
  699. // width: $max-page-width;
  700. }
  701. .nav-bar {// {{{
  702. margin-left: .5em;
  703. // margin-bottom: 1em;
  704. // margin-top: .75em;
  705. @include vert-padding-rem(.5);
  706. .caret {
  707. color: #f2f0ec;
  708. margin-right: .75rem;
  709. }
  710. .nav-bar-links {
  711. display: inline;
  712. .nav-bar-link {
  713. padding-right: .5em;
  714. }
  715. }
  716. @media (max-width: $phone-width) {
  717. // font-size: .9em;
  718. font-size: .8em;
  719. }
  720. }// }}}
  721. .hero-tagline{// {{{
  722. margin-top: .3em;
  723. font-size: .8rem;
  724. // font-style: italic;
  725. text-align: center;
  726. .icon {
  727. width: 1.25rem;
  728. }
  729. }// }}}
  730. // }}} hero //
  731. // article-list {{{ //
  732. .article-list h1.list-title {
  733. font-size: 3em;
  734. color: #ffcc66;
  735. }
  736. .article-list article {
  737. padding-top: 4rem;
  738. padding-bottom: 4rem;
  739. margin-bottom: 4rem;
  740. }
  741. .article-list article h2.headline,
  742. .article-list article h2.headline a {
  743. margin-top: 0;
  744. color: #6699cc;
  745. }
  746. .article-list article .meta {
  747. margin-bottom: 1rem;
  748. }
  749. .article-list article .meta .key {
  750. color: #747369;
  751. }
  752. .article-list article .meta .val,
  753. .article-list article .meta .val a {
  754. color: #cc99cc;
  755. }
  756. .article-list article section.summary a { color: #d27b53; }
  757. // }}} article-list //
  758. // article.single {{{ //
  759. article.single {
  760. .meta {
  761. font-size: 0.9em;
  762. text-align: right;
  763. margin-top: .5rem;
  764. margin-bottom: .5rem;
  765. .key {
  766. color: #747369;
  767. }
  768. .val {
  769. color: #cc99cc;
  770. a {
  771. color: #cc99cc;
  772. }
  773. }
  774. }
  775. .body {
  776. padding-top: 1rem;
  777. padding-bottom: 3rem;
  778. }
  779. @media (max-width: $max-page-width) {
  780. .meta {
  781. padding-left: 2rem;
  782. padding-right: 2rem;
  783. }
  784. .body {
  785. padding-top: .5rem;
  786. padding-bottom: 1rem;
  787. }
  788. }
  789. }
  790. article.single h1.headline {
  791. margin-top: 0;
  792. font-size: 3em;
  793. color: #ffcc66;
  794. }
  795. @media (max-width: $max-page-width) {
  796. article.single h1.headline {
  797. font-size: 2em;
  798. padding-left: 2rem;
  799. padding-right: 2rem;
  800. }
  801. }
  802. /* Highlight Colors */
  803. article.single section.body h1 { color: #6699cc; }
  804. article.single section.body h2 { color: #99cc99; }
  805. article.single section.body h3 { color: #f99157; }
  806. article.single section.body h4 { color: #f2777a; }
  807. article.single section.body h5 { color: #515151; }
  808. article.single section.body h6 { color: #747369; }
  809. // article.single section.body a,a:visited { color: #a06700; }
  810. article.single section.body a,a:visited { color: $base-sky-blue; }
  811. /* Article Elements */
  812. article.single * {
  813. max-width: 100%;
  814. }
  815. article.single pre {
  816. margin-top: 0;
  817. margin-bottom: 1rem;
  818. // overflow-x: auto;
  819. border-radius: 3px;
  820. padding: 2rem;
  821. }
  822. article.single p code {
  823. padding: 0.2em 0.5em;
  824. border-radius: 3px;
  825. background: #747369;
  826. color: #f2f0ec;
  827. }
  828. article.single figure, article.single div.highlight {
  829. box-sizing: border-box;
  830. max-width: 52rem;
  831. width: 52rem;
  832. margin-bottom: 1rem;
  833. padding: 1em;
  834. background-color: #393939;
  835. }
  836. @media (max-width: $max-page-width) {
  837. article.single figure, article.single div.highlight {
  838. width: 100%;
  839. margin-left: 0;
  840. margin-right: 0;
  841. border-radius: 3px;
  842. }
  843. }
  844. article.single figure img {
  845. max-width: 100%;
  846. width: 100%;
  847. border-radius: 3px;
  848. }
  849. article.single figure figcaption {
  850. margin-top: 1rem;
  851. }
  852. article.single figure figcaption h4 {
  853. margin-top: 0;
  854. text-align: center;
  855. font-style: italic;
  856. font-weight: normal;
  857. color: #f2f0ec;
  858. }
  859. article.single table {
  860. border-collapse: separate;
  861. border-spacing: 0;
  862. max-width: 100%;
  863. width: 100%;
  864. }
  865. article.single th,
  866. article.single td {
  867. padding: .25rem 1rem;
  868. line-height: inherit;
  869. border-bottom-width: 1px;
  870. border-bottom-style: solid;
  871. border-bottom-color: $base04;
  872. }
  873. article.single tr:last-child td {
  874. border-bottom: 0;
  875. }
  876. article.single th {
  877. text-align: left;
  878. font-weight: bold;
  879. vertical-align: bottom;
  880. }
  881. article.single td { vertical-align: top }
  882. article.single blockquote {
  883. margin-left: 2rem;
  884. margin-right: 3rem;
  885. padding-left: 1rem;
  886. border-left: 5px solid #66cccc;
  887. }
  888. article.single hr {
  889. border: 0;
  890. border-bottom-style: solid;
  891. border-bottom-width: 1px;
  892. border-bottom-color: $base04;
  893. }
  894. // }}} article.single //
  895. // Pygments {{{ //
  896. pre { background: #2d2d2d; color: #f2f0ec }
  897. .highlight .hll { background-color: #515151 }
  898. .highlight .c { color: #747369 } /* Comment */
  899. .highlight .err { color: #f2777a } /* Error */
  900. .highlight .k { color: #cc99cc } /* Keyword */
  901. .highlight .l { color: #f99157 } /* Literal */
  902. .highlight .n { color: #f2f0ec } /* Name */
  903. .highlight .o { color: #66cccc } /* Operator */
  904. .highlight .p { color: #f2f0ec } /* Punctuation */
  905. .highlight .cm { color: #747369 } /* Comment.Multiline */
  906. .highlight .cp { color: #747369 } /* Comment.Preproc */
  907. .highlight .c1 { color: #747369 } /* Comment.Single */
  908. .highlight .cs { color: #747369 } /* Comment.Special */
  909. .highlight .gd { color: #f2777a } /* Generic.Deleted */
  910. .highlight .ge { font-style: italic } /* Generic.Emph */
  911. .highlight .gh { color: #f2f0ec; font-weight: bold } /* Generic.Heading */
  912. .highlight .gi { color: #99cc99 } /* Generic.Inserted */
  913. .highlight .gp { color: #747369; font-weight: bold } /* Generic.Prompt */
  914. .highlight .gs { font-weight: bold } /* Generic.Strong */
  915. .highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */
  916. .highlight .kc { color: #cc99cc } /* Keyword.Constant */
  917. .highlight .kd { color: #cc99cc } /* Keyword.Declaration */
  918. .highlight .kn { color: #66cccc } /* Keyword.Namespace */
  919. .highlight .kp { color: #cc99cc } /* Keyword.Pseudo */
  920. .highlight .kr { color: #cc99cc } /* Keyword.Reserved */
  921. .highlight .kt { color: #ffcc66 } /* Keyword.Type */
  922. .highlight .ld { color: #99cc99 } /* Literal.Date */
  923. .highlight .m { color: #f99157 } /* Literal.Number */
  924. .highlight .s { color: #99cc99 } /* Literal.String */
  925. .highlight .na { color: #6699cc } /* Name.Attribute */
  926. .highlight .nb { color: #f2f0ec } /* Name.Builtin */
  927. .highlight .nc { color: #ffcc66 } /* Name.Class */
  928. .highlight .no { color: #f2777a } /* Name.Constant */
  929. .highlight .nd { color: #66cccc } /* Name.Decorator */
  930. .highlight .ni { color: #f2f0ec } /* Name.Entity */
  931. .highlight .ne { color: #f2777a } /* Name.Exception */
  932. .highlight .nf { color: #6699cc } /* Name.Function */
  933. .highlight .nl { color: #f2f0ec } /* Name.Label */
  934. .highlight .nn { color: #ffcc66 } /* Name.Namespace */
  935. .highlight .nx { color: #6699cc } /* Name.Other */
  936. .highlight .py { color: #f2f0ec } /* Name.Property */
  937. .highlight .nt { color: #66cccc } /* Name.Tag */
  938. .highlight .nv { color: #f2777a } /* Name.Variable */
  939. .highlight .ow { color: #66cccc } /* Operator.Word */
  940. .highlight .w { color: #f2f0ec } /* Text.Whitespace */
  941. .highlight .mf { color: #f99157 } /* Literal.Number.Float */
  942. .highlight .mh { color: #f99157 } /* Literal.Number.Hex */
  943. .highlight .mi { color: #f99157 } /* Literal.Number.Integer */
  944. .highlight .mo { color: #f99157 } /* Literal.Number.Oct */
  945. .highlight .sb { color: #99cc99 } /* Literal.String.Backtick */
  946. .highlight .sc { color: #f2f0ec } /* Literal.String.Char */
  947. .highlight .sd { color: #747369 } /* Literal.String.Doc */
  948. .highlight .s2 { color: #99cc99 } /* Literal.String.Double */
  949. .highlight .se { color: #f99157 } /* Literal.String.Escape */
  950. .highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */
  951. .highlight .si { color: #f99157 } /* Literal.String.Interpol */
  952. .highlight .sx { color: #99cc99 } /* Literal.String.Other */
  953. .highlight .sr { color: #99cc99 } /* Literal.String.Regex */
  954. .highlight .s1 { color: #99cc99 } /* Literal.String.Single */
  955. .highlight .ss { color: #99cc99 } /* Literal.String.Symbol */
  956. .highlight .bp { color: #f2f0ec } /* Name.Builtin.Pseudo */
  957. .highlight .vc { color: #f2777a } /* Name.Variable.Class */
  958. .highlight .vg { color: #f2777a } /* Name.Variable.Global */
  959. .highlight .vi { color: #f2777a } /* Name.Variable.Instance */
  960. .highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */
  961. /*# sourceMappingURL=style.css.map */
  962. // }}} Pygments //