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.

750 lines
16 KiB

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