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.

1242 lines
24 KiB

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