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.

900 lines
17 KiB

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