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.

1206 lines
23 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: 1.75em;
  401. position: relative;
  402. top: 1em;
  403. }
  404. }// }}}
  405. #contact-info {// {{{
  406. @include side-margin-em(0);
  407. // @include vert-padding-rem(0.5);
  408. @include a-color($base-sky-blue);
  409. // min-width: $max-page-width;
  410. @media (min-width: 1200px) {
  411. .container{
  412. min-width: $max-page-width;
  413. }
  414. }
  415. font-size: .9em;
  416. .row {
  417. // flex-grow: 1;
  418. color: $base05;
  419. img {
  420. height: 1em;
  421. // @media (max-width: $phone-width) {
  422. // height: 1.5em;
  423. // }
  424. }
  425. div[class^="col"] {
  426. @include side-padding-rem(0);
  427. // text-align: center;
  428. }
  429. }
  430. .url-info {
  431. margin-left: 5px;
  432. // position: relative;
  433. // left: -8px;
  434. @media (max-width: $phone-width) {
  435. // display: none;
  436. // font-size: 10px;
  437. font-size: .8em;
  438. }
  439. }
  440. }// }}}
  441. #resume {// {{{
  442. a {// {{{
  443. text-decoration: none;
  444. &:hover {
  445. text-decoration: underline;
  446. }
  447. }// }}}
  448. h1 {// {{{
  449. color: $base-orange;
  450. margin-top: 1rem;
  451. @media (max-width: $phone-width) {
  452. margin-top: .75rem;
  453. }
  454. }// }}}
  455. h2 {// {{{
  456. color: $base-orange;
  457. margin-top: .5rem;
  458. @media (max-width: $phone-width) {
  459. font-size: 1.2em;
  460. margin-top: .75rem;
  461. }
  462. }// }}}
  463. h4 {// {{{
  464. color: $base-yellow;
  465. margin-top: .5rem;
  466. @media (max-width: $phone-width) {
  467. font-size: 1.2em;
  468. margin-top: .75rem;
  469. }
  470. }// }}}
  471. .date {// {{{
  472. padding-top: .8em;
  473. float: right;
  474. color: $base03;
  475. @media (max-width: $phone-width) {
  476. padding-top: 0em;
  477. }
  478. }// }}}
  479. #projects {// {{{
  480. h1 {
  481. margin-bottom: 3px;
  482. }
  483. .project {// {{{
  484. @include vert-padding-rem(.2);
  485. h2 {
  486. color: $base-sky-blue;
  487. display: inline;
  488. }
  489. img {
  490. height: 1.2em;
  491. }
  492. .project-link {
  493. &:hover {
  494. text-decoration: none;
  495. }
  496. }
  497. .down-triangle {
  498. // fill: blue;
  499. height: 1.2em;
  500. position: relative;
  501. top: -3px;
  502. left: -3px;
  503. }
  504. .btn {// {{{
  505. display: inline;
  506. background-color: transparent;
  507. margin-bottom: 5px;
  508. padding-left: 7px;
  509. &:focus, &:active {
  510. outline: none !important;
  511. box-shadow: none;
  512. }
  513. }// }}}
  514. // }}}
  515. // [id^="details-"] {
  516. // margin-top: .5em;
  517. // }
  518. }
  519. }// }}}
  520. .institution {
  521. color: $base-yellow;
  522. font-weight: bold;
  523. font-size: 1.1em;
  524. margin-bottom: 5px;
  525. }
  526. .title {
  527. font-style: italic;
  528. }
  529. #education {// {{{
  530. .date {
  531. padding-top: 0;
  532. }
  533. }// }}}
  534. @media (max-width: $phone-width) {
  535. font-size: 14px;
  536. // font-size: 1em;
  537. }
  538. }// }}}
  539. #server {// {{{
  540. .body {
  541. @include vert-padding-rem(.5);
  542. }
  543. h1 {
  544. margin-bottom: .25em;
  545. }
  546. // table {
  547. // margin-top: 1.75em;
  548. // }
  549. th, td {
  550. @include vert-padding-rem(.4);
  551. @include side-padding-rem(.5);
  552. border: 1px solid rgba(160, 159, 147, .5);
  553. }
  554. th {
  555. color: $base-orange;
  556. text-align: center;
  557. font-size: 1.3em;
  558. }
  559. td {
  560. font-size: .9em;
  561. }
  562. .description {
  563. font-size: .85em;
  564. }
  565. .status {
  566. text-align: center;
  567. img {
  568. height: 2em;
  569. }
  570. }
  571. #time-info {
  572. padding-top: 1em;
  573. font-size: .75em;
  574. font-style: italic;
  575. color: $base03;
  576. }
  577. }// }}}
  578. #card {// {{{
  579. @include vert-margin-rem(2);
  580. align-items: center;
  581. justify-content: center;
  582. font-family: 'Oxygen Mono', monospace;
  583. .container {// {{{
  584. padding-left: 0;
  585. padding-right: 0;
  586. .row {
  587. padding-top: 6rem;
  588. padding-bottom: 8rem;
  589. @media (max-width: $phone-width) {
  590. padding-top: 5rem;
  591. padding-bottom: 6rem;
  592. }
  593. }
  594. }// }}}
  595. // $card-bg: #e8e6df;
  596. $card-bg: $base07;
  597. #presentational-container {// {{{
  598. margin-top: 3em;
  599. margin-bottom: 1em;
  600. max-width: $max-page-width;
  601. box-shadow: 2px 2px 10px 5px black;
  602. // card bg
  603. // background-color: #fff;
  604. // background-color: #e5e5e5;
  605. background-color: $card-bg;
  606. }// }}}
  607. #email-full {// {{{
  608. font-size: 50px;
  609. @media (max-width: $phone-width) {
  610. font-size: 40px;
  611. }
  612. @media (max-width: $vert-phone-width) {
  613. font-size: 33px;
  614. }
  615. @include vert-margin-rem(2);
  616. height: 7em;
  617. img {
  618. height: .5em;
  619. position: absolute;
  620. left: -.8em;
  621. bottom: -.15em;
  622. }
  623. p { // {{{
  624. position: relative;
  625. // color: grey;
  626. color: #151515;
  627. // color: #133337;
  628. div {
  629. display: inline;
  630. }
  631. .social {// {{{
  632. // display: none;
  633. display: inline;
  634. white-space: nowrap;
  635. position: absolute;
  636. // left: 5.5rem;
  637. left: 0rem;
  638. .safari {
  639. display: none;
  640. }
  641. @supports (-webkit-backdrop-filter: blur(1px)) {
  642. left: .65rem;
  643. .safari {
  644. display: inline;
  645. }
  646. }
  647. .link-text {
  648. position: relative;
  649. width: 100%;
  650. }
  651. $border-thickness: 8px;
  652. @media (max-width: $vert-phone-width) {
  653. $border-thickness: 5px;
  654. }
  655. .link {
  656. position: absolute;
  657. border-color: black;
  658. border-style: solid;
  659. border-width: 0 $border-thickness $border-thickness $border-thickness;
  660. height: .45em;
  661. width: 100%;
  662. left: 0;
  663. img {
  664. position: absolute;
  665. left: -1em;
  666. }
  667. &.link-top {
  668. border-width: $border-thickness $border-thickness 0 $border-thickness;
  669. img {
  670. position: absolute;
  671. top: -.2em;
  672. }
  673. }
  674. &:hover {
  675. opacity: .6;
  676. }
  677. }
  678. $line-spacing: .65em;
  679. #mastodon {
  680. top: -$line-spacing * 1.1;
  681. border-color: #3088d4;
  682. }
  683. .linkedin {
  684. bottom: -$line-spacing * 1.1;
  685. border-color: #0077b7;
  686. &.linkedin-middle {
  687. border-style: dotted;
  688. border-width: 0 0 3.5px 0;
  689. }
  690. }
  691. #github {
  692. bottom: -$line-spacing * 2.7;
  693. }
  694. #site {
  695. bottom: -$line-spacing * 4.25;
  696. border-color: #ff7058;
  697. }
  698. #email {
  699. top: -$line-spacing * 2.65;
  700. border-color: #d1d0bf;
  701. }
  702. }// }}}
  703. .spacing {
  704. opacity: 0;
  705. }
  706. }// }}}
  707. }// }}}
  708. }// }}}
  709. // TODO: converted up to here
  710. // hero {{{ //
  711. h1.site-title {// {{{
  712. text-align: center;
  713. font-size: 4.2em;
  714. // color: #66cccc;
  715. color: $base05;
  716. // margin-top: 1rem;
  717. // margin-bottom: 0.75rem;
  718. @include vert-margin-rem(.75);
  719. @include a-color($base-sky-blue);
  720. a {
  721. text-decoration: none;
  722. }
  723. @media (max-width: $max-page-width) {
  724. font-size: 3em;
  725. }
  726. @media (max-width: $phone-width) {
  727. font-size: 3.5em;
  728. @include vert-margin-rem(.3);
  729. // font-size: 2.5em;
  730. // font-size: 2em;
  731. .surrounding {
  732. display: none;
  733. }
  734. }
  735. }// }}}
  736. .hero-logo img {
  737. margin-top: 0.5rem;
  738. width: 100%;
  739. // display: none;
  740. // width: $max-page-width;
  741. }
  742. .nav-bar {// {{{
  743. margin-left: .5em;
  744. // margin-bottom: 1em;
  745. // margin-top: .75em;
  746. @include vert-padding-rem(.5);
  747. .caret {
  748. color: #f2f0ec;
  749. margin-right: .75rem;
  750. }
  751. .nav-bar-links {
  752. display: inline;
  753. .nav-bar-link {
  754. padding-right: .5em;
  755. }
  756. }
  757. @media (max-width: $phone-width) {
  758. // font-size: .9em;
  759. font-size: .8em;
  760. }
  761. }// }}}
  762. .hero-tagline{// {{{
  763. margin-top: .3em;
  764. font-size: .8rem;
  765. // font-style: italic;
  766. text-align: center;
  767. .icon {
  768. width: 1.25rem;
  769. }
  770. }// }}}
  771. // }}} hero //
  772. // article-list {{{ //
  773. .article-list h1.list-title {
  774. font-size: 3em;
  775. color: #ffcc66;
  776. }
  777. .article-list article {
  778. padding-top: 4rem;
  779. padding-bottom: 4rem;
  780. margin-bottom: 4rem;
  781. }
  782. .article-list article h2.headline,
  783. .article-list article h2.headline a {
  784. margin-top: 0;
  785. color: #6699cc;
  786. }
  787. .article-list article .meta {
  788. margin-bottom: 1rem;
  789. }
  790. .article-list article .meta .key {
  791. color: #747369;
  792. }
  793. .article-list article .meta .val,
  794. .article-list article .meta .val a {
  795. color: #cc99cc;
  796. }
  797. .article-list article section.summary a { color: #d27b53; }
  798. // }}} article-list //
  799. // article.single {{{ //
  800. article.single {
  801. .meta {
  802. font-size: 0.9em;
  803. text-align: right;
  804. margin-top: .5rem;
  805. margin-bottom: .5rem;
  806. .key {
  807. color: #747369;
  808. }
  809. .val {
  810. color: #cc99cc;
  811. a {
  812. color: #cc99cc;
  813. }
  814. }
  815. }
  816. .body {
  817. padding-top: 1rem;
  818. padding-bottom: 3rem;
  819. }
  820. @media (max-width: $max-page-width) {
  821. .meta {
  822. padding-left: 2rem;
  823. padding-right: 2rem;
  824. }
  825. .body {
  826. padding-top: .5rem;
  827. padding-bottom: 1rem;
  828. }
  829. }
  830. }
  831. article.single h1.headline {
  832. margin-top: 0;
  833. font-size: 3em;
  834. color: #ffcc66;
  835. }
  836. @media (max-width: $max-page-width) {
  837. article.single h1.headline {
  838. font-size: 2em;
  839. padding-left: 2rem;
  840. padding-right: 2rem;
  841. }
  842. }
  843. /* Highlight Colors */
  844. article.single section.body h1 { color: #6699cc; }
  845. article.single section.body h2 { color: #99cc99; }
  846. article.single section.body h3 { color: #f99157; }
  847. article.single section.body h4 { color: #f2777a; }
  848. article.single section.body h5 { color: #515151; }
  849. article.single section.body h6 { color: #747369; }
  850. // article.single section.body a,a:visited { color: #a06700; }
  851. article.single section.body a,a:visited { color: $base-sky-blue; }
  852. /* Article Elements */
  853. article.single * {
  854. max-width: 100%;
  855. }
  856. article.single pre {
  857. margin-top: 0;
  858. margin-bottom: 1rem;
  859. // overflow-x: auto;
  860. border-radius: 3px;
  861. padding: 2rem;
  862. }
  863. article.single p code {
  864. padding: 0.2em 0.5em;
  865. border-radius: 3px;
  866. background: #747369;
  867. color: #f2f0ec;
  868. }
  869. article.single figure, article.single div.highlight {
  870. box-sizing: border-box;
  871. max-width: 52rem;
  872. width: 52rem;
  873. margin-bottom: 1rem;
  874. padding: 1em;
  875. background-color: #393939;
  876. }
  877. @media (max-width: $max-page-width) {
  878. article.single figure, article.single div.highlight {
  879. width: 100%;
  880. margin-left: 0;
  881. margin-right: 0;
  882. border-radius: 3px;
  883. }
  884. }
  885. article.single figure img {
  886. max-width: 100%;
  887. width: 100%;
  888. border-radius: 3px;
  889. }
  890. article.single figure figcaption {
  891. margin-top: 1rem;
  892. }
  893. article.single figure figcaption h4 {
  894. margin-top: 0;
  895. text-align: center;
  896. font-style: italic;
  897. font-weight: normal;
  898. color: #f2f0ec;
  899. }
  900. article.single table {
  901. border-collapse: separate;
  902. border-spacing: 0;
  903. max-width: 100%;
  904. width: 100%;
  905. }
  906. article.single th,
  907. article.single td {
  908. padding: .25rem 1rem;
  909. line-height: inherit;
  910. border-bottom-width: 1px;
  911. border-bottom-style: solid;
  912. border-bottom-color: $base04;
  913. }
  914. article.single tr:last-child td {
  915. border-bottom: 0;
  916. }
  917. article.single th {
  918. text-align: left;
  919. font-weight: bold;
  920. vertical-align: bottom;
  921. }
  922. article.single td { vertical-align: top }
  923. article.single blockquote {
  924. margin-left: 2rem;
  925. margin-right: 3rem;
  926. padding-left: 1rem;
  927. border-left: 5px solid #66cccc;
  928. }
  929. article.single hr {
  930. border: 0;
  931. border-bottom-style: solid;
  932. border-bottom-width: 1px;
  933. border-bottom-color: $base04;
  934. }
  935. // }}} article.single //
  936. // Pygments {{{ //
  937. pre { background: #2d2d2d; color: #f2f0ec }
  938. .highlight .hll { background-color: #515151 }
  939. .highlight .c { color: #747369 } /* Comment */
  940. .highlight .err { color: #f2777a } /* Error */
  941. .highlight .k { color: #cc99cc } /* Keyword */
  942. .highlight .l { color: #f99157 } /* Literal */
  943. .highlight .n { color: #f2f0ec } /* Name */
  944. .highlight .o { color: #66cccc } /* Operator */
  945. .highlight .p { color: #f2f0ec } /* Punctuation */
  946. .highlight .cm { color: #747369 } /* Comment.Multiline */
  947. .highlight .cp { color: #747369 } /* Comment.Preproc */
  948. .highlight .c1 { color: #747369 } /* Comment.Single */
  949. .highlight .cs { color: #747369 } /* Comment.Special */
  950. .highlight .gd { color: #f2777a } /* Generic.Deleted */
  951. .highlight .ge { font-style: italic } /* Generic.Emph */
  952. .highlight .gh { color: #f2f0ec; font-weight: bold } /* Generic.Heading */
  953. .highlight .gi { color: #99cc99 } /* Generic.Inserted */
  954. .highlight .gp { color: #747369; font-weight: bold } /* Generic.Prompt */
  955. .highlight .gs { font-weight: bold } /* Generic.Strong */
  956. .highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */
  957. .highlight .kc { color: #cc99cc } /* Keyword.Constant */
  958. .highlight .kd { color: #cc99cc } /* Keyword.Declaration */
  959. .highlight .kn { color: #66cccc } /* Keyword.Namespace */
  960. .highlight .kp { color: #cc99cc } /* Keyword.Pseudo */
  961. .highlight .kr { color: #cc99cc } /* Keyword.Reserved */
  962. .highlight .kt { color: #ffcc66 } /* Keyword.Type */
  963. .highlight .ld { color: #99cc99 } /* Literal.Date */
  964. .highlight .m { color: #f99157 } /* Literal.Number */
  965. .highlight .s { color: #99cc99 } /* Literal.String */
  966. .highlight .na { color: #6699cc } /* Name.Attribute */
  967. .highlight .nb { color: #f2f0ec } /* Name.Builtin */
  968. .highlight .nc { color: #ffcc66 } /* Name.Class */
  969. .highlight .no { color: #f2777a } /* Name.Constant */
  970. .highlight .nd { color: #66cccc } /* Name.Decorator */
  971. .highlight .ni { color: #f2f0ec } /* Name.Entity */
  972. .highlight .ne { color: #f2777a } /* Name.Exception */
  973. .highlight .nf { color: #6699cc } /* Name.Function */
  974. .highlight .nl { color: #f2f0ec } /* Name.Label */
  975. .highlight .nn { color: #ffcc66 } /* Name.Namespace */
  976. .highlight .nx { color: #6699cc } /* Name.Other */
  977. .highlight .py { color: #f2f0ec } /* Name.Property */
  978. .highlight .nt { color: #66cccc } /* Name.Tag */
  979. .highlight .nv { color: #f2777a } /* Name.Variable */
  980. .highlight .ow { color: #66cccc } /* Operator.Word */
  981. .highlight .w { color: #f2f0ec } /* Text.Whitespace */
  982. .highlight .mf { color: #f99157 } /* Literal.Number.Float */
  983. .highlight .mh { color: #f99157 } /* Literal.Number.Hex */
  984. .highlight .mi { color: #f99157 } /* Literal.Number.Integer */
  985. .highlight .mo { color: #f99157 } /* Literal.Number.Oct */
  986. .highlight .sb { color: #99cc99 } /* Literal.String.Backtick */
  987. .highlight .sc { color: #f2f0ec } /* Literal.String.Char */
  988. .highlight .sd { color: #747369 } /* Literal.String.Doc */
  989. .highlight .s2 { color: #99cc99 } /* Literal.String.Double */
  990. .highlight .se { color: #f99157 } /* Literal.String.Escape */
  991. .highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */
  992. .highlight .si { color: #f99157 } /* Literal.String.Interpol */
  993. .highlight .sx { color: #99cc99 } /* Literal.String.Other */
  994. .highlight .sr { color: #99cc99 } /* Literal.String.Regex */
  995. .highlight .s1 { color: #99cc99 } /* Literal.String.Single */
  996. .highlight .ss { color: #99cc99 } /* Literal.String.Symbol */
  997. .highlight .bp { color: #f2f0ec } /* Name.Builtin.Pseudo */
  998. .highlight .vc { color: #f2777a } /* Name.Variable.Class */
  999. .highlight .vg { color: #f2777a } /* Name.Variable.Global */
  1000. .highlight .vi { color: #f2777a } /* Name.Variable.Instance */
  1001. .highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */
  1002. /*# sourceMappingURL=style.css.map */
  1003. // }}} Pygments //