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