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.

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