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.

808 lines
15 KiB

  1. /* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
  2. /* .base00 { color: #2d2d2d; }
  3. .base01 { color: #393939; }
  4. .base02 { color: #515151; }
  5. .base03 { color: #747369; }
  6. .base04 { color: #a09f93; }
  7. .base06 { color: #e8e6df; }
  8. .base07 { color: #f2f0ec; } */
  9. .base08 {
  10. color: #f2777a; }
  11. .base09 {
  12. color: #f99157; }
  13. .base0a {
  14. color: #ffcc66; }
  15. .base0b {
  16. color: #99cc99; }
  17. .base0c {
  18. color: #66cccc; }
  19. .base0d {
  20. color: #6699cc; }
  21. .base0e {
  22. color: #cc99cc; }
  23. .base0f {
  24. color: #d27b53; }
  25. body {
  26. margin: 0;
  27. background-color: white;
  28. color: black;
  29. line-height: 1.5;
  30. font-size: 100%;
  31. /* font-family: 'Source Code Pro', monospace; */
  32. font-family: 'Hack', monospace;
  33. display: flex;
  34. flex-direction: column;
  35. min-height: 100vh; }
  36. body a {
  37. color: #66cccc; }
  38. body a:visited {
  39. color: #66cccc; }
  40. body a:active {
  41. color: #66cccc; }
  42. .container {
  43. max-width: 52em;
  44. margin-left: auto;
  45. margin-right: auto;
  46. flex: 1; }
  47. .container .copyright a {
  48. color: #747369; }
  49. .container .copyright a:visited {
  50. color: #747369; }
  51. .container .copyright a:active {
  52. color: #747369; }
  53. @media (max-width: 52em) {
  54. .container {
  55. width: 100%; } }
  56. div .right {
  57. float: right; }
  58. div .clearfix {
  59. overflow: auto; }
  60. article .single section {
  61. /* background-color: #e6e6fa; */
  62. background-color: #cbbeb5;
  63. color: #2d2d2d;
  64. padding-left: 8rem;
  65. padding-right: 8rem;
  66. padding-top: 1rem;
  67. padding-bottom: 1rem;
  68. /* min-height: 50%; */
  69. /* min-height: 30em; */ }
  70. @media (max-width: 52em) {
  71. article .single section {
  72. padding-left: 2rem;
  73. padding-right: 2rem; } }
  74. .article-list article {
  75. /* background-color: #e6e6fa; */
  76. background-color: #cbbeb5;
  77. color: #2d2d2d;
  78. padding-left: 8rem;
  79. padding-right: 8rem;
  80. padding-top: 1rem;
  81. padding-bottom: 1rem;
  82. /* min-height: 50%; */
  83. /* min-height: 30em; */ }
  84. @media (max-width: 52em) {
  85. .article-list article {
  86. padding-left: 2rem;
  87. padding-right: 2rem; } }
  88. header {
  89. margin-top: 1.5rem;
  90. margin-bottom: 1rem; }
  91. @media (max-width: 52em) {
  92. header {
  93. margin-top: 0;
  94. padding-left: 2rem;
  95. padding-right: 2rem; } }
  96. footer {
  97. margin-top: 2rem;
  98. margin-bottom: 1rem;
  99. text-align: center;
  100. font-size: 0.9em;
  101. color: #747369; }
  102. footer .container {
  103. background-color: #393939;
  104. max-width: 62em;
  105. margin-left: auto;
  106. margin-right: auto;
  107. padding-top: 0.1rem;
  108. padding-bottom: 0.1rem; }
  109. @media (max-width: 52em) {
  110. footer {
  111. margin-top: 0;
  112. margin-bottom: 0; } }
  113. @media (max-width: 800px) {
  114. footer {
  115. font-size: 0.8em; } }
  116. /* Typography */
  117. h1 {
  118. font-weight: bold;
  119. line-height: 1.25;
  120. margin-top: 1em;
  121. margin-bottom: .5em; }
  122. h2 {
  123. font-weight: bold;
  124. line-height: 1.25;
  125. margin-top: 1em;
  126. margin-bottom: .5em; }
  127. h3 {
  128. font-weight: bold;
  129. line-height: 1.25;
  130. margin-top: 1em;
  131. margin-bottom: .5em; }
  132. h4 {
  133. font-weight: bold;
  134. line-height: 1.25;
  135. margin-top: 1em;
  136. margin-bottom: .5em; }
  137. h5 {
  138. font-weight: bold;
  139. line-height: 1.25;
  140. margin-top: 1em;
  141. margin-bottom: .5em; }
  142. p {
  143. margin-top: 0;
  144. margin-bottom: 1rem; }
  145. h1 {
  146. font-size: 2rem; }
  147. h2 {
  148. font-size: 1.5rem; }
  149. h3 {
  150. font-size: 1.25rem; }
  151. h4 {
  152. font-size: 1rem; }
  153. h5 {
  154. font-size: .875rem; }
  155. h6 {
  156. font-size: .75rem; }
  157. pre, code {
  158. font-family: inherit;
  159. font-size: inherit; }
  160. header a .path .path:visited {
  161. color: #6699cc; }
  162. header span caret {
  163. color: #f2f0ec; }
  164. footer a {
  165. color: #747369; }
  166. footer a:visited {
  167. color: #747369; }
  168. footer a:active {
  169. color: #747369; }
  170. .page-not-found h1 {
  171. text-align: center;
  172. font-size: 5em; }
  173. .page-not-found h2 {
  174. text-align: center;
  175. font-size: 3em;
  176. color: #a09f93;
  177. margin-bottom: 4rem; }
  178. @media (max-width: 52em) {
  179. .page-not-found h1 {
  180. font-size: 3em; }
  181. .page-not-found h2 {
  182. font-size: 2em; } }
  183. #homepage #about {
  184. font-size: 1.25rem; }
  185. #homepage #about h2 {
  186. margin-top: 1.25rem;
  187. font-size: 2rem;
  188. color: #ffcc66;
  189. text-align: center; }
  190. #homepage #about .me-equation {
  191. margin-top: 3em;
  192. text-align: center;
  193. display: flex;
  194. justify-content: center;
  195. /* align horizontal */
  196. align-items: center;
  197. /* align vertical */ }
  198. #homepage #about .me-equation .equation-part {
  199. display: flex;
  200. flex: 1;
  201. justify-content: center;
  202. /* align horizontal */
  203. align-items: center;
  204. /* align vertical */ }
  205. #homepage #about .me-equation .equation-part a {
  206. text-decoration: none;
  207. width: 70%; }
  208. #homepage #about .me-equation .equation-part img {
  209. width: 70%;
  210. height: 100%;
  211. border-radius: 1.1em;
  212. display: inline; }
  213. #homepage #about .me-equation .equation-part img#gnu {
  214. background-color: #a09f93; }
  215. #homepage #about .me-equation .equation-part p {
  216. font-size: 3vw;
  217. display: inline-block;
  218. padding-left: 0.2rem;
  219. padding-right: 0.2rem; }
  220. @media (max-width: 800px) {
  221. #homepage #about .me-equation {
  222. flex-wrap: wrap;
  223. margin-top: 2em;
  224. justify-content: space-around;
  225. /* align horizontal */ }
  226. #homepage #about .me-equation .equation-part {
  227. min-width: 33%; }
  228. #homepage #about .me-equation .equation-part img {
  229. flex: 1.5; }
  230. #homepage #about .me-equation .equation-part img#hexatar {
  231. max-width: 20%;
  232. margin-top: 1.75rem; }
  233. #homepage #about .me-equation .equation-part p {
  234. font-size: 6vw;
  235. flex: 1; }
  236. #homepage #about .me-equation .equation-part#uoft-part {
  237. justify-content: flex-end; } }
  238. @media (max-width: 800px) {
  239. #homepage #about {
  240. font-size: .9em; }
  241. #homepage #about h1 {
  242. font-size: 1.4rem; } }
  243. @media (max-width: 52em) {
  244. #homepage {
  245. margin-bottom: 2rem; } }
  246. /* .homepage section.categories,
  247. .homepage section.tags {
  248. padding-left: 2rem;
  249. padding-right: 2rem;
  250. }
  251. .homepage .category,
  252. .homepage .category a,
  253. .homepage .tag,
  254. .homepage .tag a {
  255. color: #cc99cc;
  256. }
  257. .homepage .tag {
  258. margin-right: 2em;
  259. } */
  260. #contact-info {
  261. padding-top: 0.5rem;
  262. padding-bottom: 0.5rem;
  263. display: flex;
  264. align-content: center; }
  265. #contact-info div {
  266. flex-grow: 1;
  267. color: #d3d0c8; }
  268. #contact-info div img {
  269. height: 1em; }
  270. #contact-info #email {
  271. text-align: center; }
  272. #contact-info #website {
  273. text-align: right; }
  274. #resume a {
  275. text-decoration: none; }
  276. #resume a:hover {
  277. text-decoration: underline; }
  278. #resume h1 {
  279. color: #f99157; }
  280. #resume h2 {
  281. color: #66cccc;
  282. display: inline; }
  283. #resume .btn {
  284. display: inline;
  285. background-color: transparent;
  286. margin-bottom: 5px; }
  287. #resume .btn:focus, #resume .btn:active {
  288. outline: none !important;
  289. box-shadow: none; }
  290. #resume .date {
  291. float: right;
  292. color: #747369; }
  293. h1.site-title {
  294. text-align: center;
  295. /* font-size: 3.5em; */
  296. font-size: 4.8em;
  297. color: #d3d0c8;
  298. margin-top: 1rem;
  299. margin-bottom: 0.5rem; }
  300. h1.site-title a {
  301. color: #66cccc; }
  302. h1.site-title a:visited {
  303. color: #66cccc; }
  304. h1.site-title a:active {
  305. color: #66cccc; }
  306. h1.site-title a {
  307. text-decoration: none; }
  308. .hero-logo img {
  309. margin-top: 0.5rem;
  310. width: 100%; }
  311. .nav-bar {
  312. margin-left: .5em;
  313. padding-top: 0.5rem;
  314. padding-bottom: 0.5rem; }
  315. .nav-bar .caret {
  316. color: #f2f0ec;
  317. margin-right: .75rem; }
  318. .nav-bar .nav-bar-links {
  319. display: inline; }
  320. .nav-bar .nav-bar-links .nav-bar-link {
  321. padding-right: .5em; }
  322. @media (max-width: 800px) {
  323. .nav-bar {
  324. font-size: .8em; } }
  325. .hero-tagline {
  326. margin-top: .3em;
  327. font-size: .8rem;
  328. text-align: center; }
  329. .hero-tagline .icon {
  330. width: 1.25rem; }
  331. .article-list h1.list-title {
  332. font-size: 3em;
  333. color: #ffcc66; }
  334. .article-list article {
  335. padding-top: 4rem;
  336. padding-bottom: 4rem;
  337. margin-bottom: 4rem; }
  338. .article-list article h2.headline,
  339. .article-list article h2.headline a {
  340. margin-top: 0;
  341. color: #6699cc; }
  342. .article-list article .meta {
  343. margin-bottom: 1rem; }
  344. .article-list article .meta .key {
  345. color: #747369; }
  346. .article-list article .meta .val,
  347. .article-list article .meta .val a {
  348. color: #cc99cc; }
  349. .article-list article section.summary a {
  350. color: #d27b53; }
  351. article.single .meta {
  352. font-size: 0.9em;
  353. text-align: right;
  354. margin-top: .5rem;
  355. margin-bottom: .5rem; }
  356. article.single .meta .key {
  357. color: #747369; }
  358. article.single .meta .val {
  359. color: #cc99cc; }
  360. article.single .meta .val a {
  361. color: #cc99cc; }
  362. article.single .body {
  363. padding-top: 1rem;
  364. padding-bottom: 3rem; }
  365. @media (max-width: 52em) {
  366. article.single .meta {
  367. padding-left: 2rem;
  368. padding-right: 2rem; }
  369. article.single .body {
  370. padding-top: .5rem;
  371. padding-bottom: 1rem; } }
  372. article.single h1.headline {
  373. margin-top: 0;
  374. font-size: 3em;
  375. color: #ffcc66; }
  376. @media (max-width: 52em) {
  377. article.single h1.headline {
  378. padding-left: 2rem;
  379. padding-right: 2rem; } }
  380. /* Highlight Colors */
  381. article.single section.body h1 {
  382. color: #6699cc; }
  383. article.single section.body h2 {
  384. color: #99cc99; }
  385. article.single section.body h3 {
  386. color: #f99157; }
  387. article.single section.body h4 {
  388. color: #f2777a; }
  389. article.single section.body h5 {
  390. color: #515151; }
  391. article.single section.body h6 {
  392. color: #747369; }
  393. article.single section.body a, a:visited {
  394. color: #a06700; }
  395. /* Article Elements */
  396. article.single * {
  397. max-width: 100%; }
  398. article.single pre {
  399. margin-top: 0;
  400. margin-bottom: 1rem;
  401. border-radius: 3px;
  402. padding: 2rem; }
  403. article.single p code {
  404. padding: 0.2em 0.5em;
  405. border-radius: 3px;
  406. background: #747369;
  407. color: #f2f0ec; }
  408. article.single figure, article.single div.highlight {
  409. box-sizing: border-box;
  410. max-width: 52rem;
  411. width: 52rem;
  412. margin-bottom: 1rem;
  413. padding: 1em;
  414. background-color: #393939; }
  415. @media (max-width: 52em) {
  416. article.single figure, article.single div.highlight {
  417. width: 100%;
  418. margin-left: 0;
  419. margin-right: 0;
  420. border-radius: 3px; } }
  421. article.single figure img {
  422. max-width: 100%;
  423. width: 100%;
  424. border-radius: 3px; }
  425. article.single figure figcaption {
  426. margin-top: 1rem; }
  427. article.single figure figcaption h4 {
  428. margin-top: 0;
  429. text-align: center;
  430. font-style: italic;
  431. font-weight: normal;
  432. color: #f2f0ec; }
  433. article.single table {
  434. border-collapse: separate;
  435. border-spacing: 0;
  436. max-width: 100%;
  437. width: 100%; }
  438. article.single th,
  439. article.single td {
  440. padding: .25rem 1rem;
  441. line-height: inherit;
  442. border-bottom-width: 1px;
  443. border-bottom-style: solid;
  444. border-bottom-color: #a09f93; }
  445. article.single tr:last-child td {
  446. border-bottom: 0; }
  447. article.single th {
  448. text-align: left;
  449. font-weight: bold;
  450. vertical-align: bottom; }
  451. article.single td {
  452. vertical-align: top; }
  453. article.single blockquote {
  454. margin-left: 2rem;
  455. margin-right: 3rem;
  456. padding-left: 1rem;
  457. border-left: 5px solid #66cccc; }
  458. article.single hr {
  459. border: 0;
  460. border-bottom-style: solid;
  461. border-bottom-width: 1px;
  462. border-bottom-color: #a09f93; }
  463. pre {
  464. background: #2d2d2d;
  465. color: #f2f0ec; }
  466. .highlight .hll {
  467. background-color: #515151; }
  468. .highlight .c {
  469. color: #747369; }
  470. /* Comment */
  471. .highlight .err {
  472. color: #f2777a; }
  473. /* Error */
  474. .highlight .k {
  475. color: #cc99cc; }
  476. /* Keyword */
  477. .highlight .l {
  478. color: #f99157; }
  479. /* Literal */
  480. .highlight .n {
  481. color: #f2f0ec; }
  482. /* Name */
  483. .highlight .o {
  484. color: #66cccc; }
  485. /* Operator */
  486. .highlight .p {
  487. color: #f2f0ec; }
  488. /* Punctuation */
  489. .highlight .cm {
  490. color: #747369; }
  491. /* Comment.Multiline */
  492. .highlight .cp {
  493. color: #747369; }
  494. /* Comment.Preproc */
  495. .highlight .c1 {
  496. color: #747369; }
  497. /* Comment.Single */
  498. .highlight .cs {
  499. color: #747369; }
  500. /* Comment.Special */
  501. .highlight .gd {
  502. color: #f2777a; }
  503. /* Generic.Deleted */
  504. .highlight .ge {
  505. font-style: italic; }
  506. /* Generic.Emph */
  507. .highlight .gh {
  508. color: #f2f0ec;
  509. font-weight: bold; }
  510. /* Generic.Heading */
  511. .highlight .gi {
  512. color: #99cc99; }
  513. /* Generic.Inserted */
  514. .highlight .gp {
  515. color: #747369;
  516. font-weight: bold; }
  517. /* Generic.Prompt */
  518. .highlight .gs {
  519. font-weight: bold; }
  520. /* Generic.Strong */
  521. .highlight .gu {
  522. color: #66cccc;
  523. font-weight: bold; }
  524. /* Generic.Subheading */
  525. .highlight .kc {
  526. color: #cc99cc; }
  527. /* Keyword.Constant */
  528. .highlight .kd {
  529. color: #cc99cc; }
  530. /* Keyword.Declaration */
  531. .highlight .kn {
  532. color: #66cccc; }
  533. /* Keyword.Namespace */
  534. .highlight .kp {
  535. color: #cc99cc; }
  536. /* Keyword.Pseudo */
  537. .highlight .kr {
  538. color: #cc99cc; }
  539. /* Keyword.Reserved */
  540. .highlight .kt {
  541. color: #ffcc66; }
  542. /* Keyword.Type */
  543. .highlight .ld {
  544. color: #99cc99; }
  545. /* Literal.Date */
  546. .highlight .m {
  547. color: #f99157; }
  548. /* Literal.Number */
  549. .highlight .s {
  550. color: #99cc99; }
  551. /* Literal.String */
  552. .highlight .na {
  553. color: #6699cc; }
  554. /* Name.Attribute */
  555. .highlight .nb {
  556. color: #f2f0ec; }
  557. /* Name.Builtin */
  558. .highlight .nc {
  559. color: #ffcc66; }
  560. /* Name.Class */
  561. .highlight .no {
  562. color: #f2777a; }
  563. /* Name.Constant */
  564. .highlight .nd {
  565. color: #66cccc; }
  566. /* Name.Decorator */
  567. .highlight .ni {
  568. color: #f2f0ec; }
  569. /* Name.Entity */
  570. .highlight .ne {
  571. color: #f2777a; }
  572. /* Name.Exception */
  573. .highlight .nf {
  574. color: #6699cc; }
  575. /* Name.Function */
  576. .highlight .nl {
  577. color: #f2f0ec; }
  578. /* Name.Label */
  579. .highlight .nn {
  580. color: #ffcc66; }
  581. /* Name.Namespace */
  582. .highlight .nx {
  583. color: #6699cc; }
  584. /* Name.Other */
  585. .highlight .py {
  586. color: #f2f0ec; }
  587. /* Name.Property */
  588. .highlight .nt {
  589. color: #66cccc; }
  590. /* Name.Tag */
  591. .highlight .nv {
  592. color: #f2777a; }
  593. /* Name.Variable */
  594. .highlight .ow {
  595. color: #66cccc; }
  596. /* Operator.Word */
  597. .highlight .w {
  598. color: #f2f0ec; }
  599. /* Text.Whitespace */
  600. .highlight .mf {
  601. color: #f99157; }
  602. /* Literal.Number.Float */
  603. .highlight .mh {
  604. color: #f99157; }
  605. /* Literal.Number.Hex */
  606. .highlight .mi {
  607. color: #f99157; }
  608. /* Literal.Number.Integer */
  609. .highlight .mo {
  610. color: #f99157; }
  611. /* Literal.Number.Oct */
  612. .highlight .sb {
  613. color: #99cc99; }
  614. /* Literal.String.Backtick */
  615. .highlight .sc {
  616. color: #f2f0ec; }
  617. /* Literal.String.Char */
  618. .highlight .sd {
  619. color: #747369; }
  620. /* Literal.String.Doc */
  621. .highlight .s2 {
  622. color: #99cc99; }
  623. /* Literal.String.Double */
  624. .highlight .se {
  625. color: #f99157; }
  626. /* Literal.String.Escape */
  627. .highlight .sh {
  628. color: #99cc99; }
  629. /* Literal.String.Heredoc */
  630. .highlight .si {
  631. color: #f99157; }
  632. /* Literal.String.Interpol */
  633. .highlight .sx {
  634. color: #99cc99; }
  635. /* Literal.String.Other */
  636. .highlight .sr {
  637. color: #99cc99; }
  638. /* Literal.String.Regex */
  639. .highlight .s1 {
  640. color: #99cc99; }
  641. /* Literal.String.Single */
  642. .highlight .ss {
  643. color: #99cc99; }
  644. /* Literal.String.Symbol */
  645. .highlight .bp {
  646. color: #f2f0ec; }
  647. /* Name.Builtin.Pseudo */
  648. .highlight .vc {
  649. color: #f2777a; }
  650. /* Name.Variable.Class */
  651. .highlight .vg {
  652. color: #f2777a; }
  653. /* Name.Variable.Global */
  654. .highlight .vi {
  655. color: #f2777a; }
  656. /* Name.Variable.Instance */
  657. .highlight .il {
  658. color: #f99157; }
  659. /* Literal.Number.Integer.Long */
  660. /*# sourceMappingURL=style.css.map */