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.

1182 lines
23 KiB

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