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.

727 lines
13 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: #2d2d2d;
  28. color: #f2f0ec;
  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. height: 1.8em; }
  108. @media (max-width: 52em) {
  109. footer {
  110. margin-top: 0;
  111. margin-bottom: 0; } }
  112. /* Typography */
  113. h1 {
  114. font-weight: bold;
  115. line-height: 1.25;
  116. margin-top: 1em;
  117. margin-bottom: .5em; }
  118. h2 {
  119. font-weight: bold;
  120. line-height: 1.25;
  121. margin-top: 1em;
  122. margin-bottom: .5em; }
  123. h3 {
  124. font-weight: bold;
  125. line-height: 1.25;
  126. margin-top: 1em;
  127. margin-bottom: .5em; }
  128. h4 {
  129. font-weight: bold;
  130. line-height: 1.25;
  131. margin-top: 1em;
  132. margin-bottom: .5em; }
  133. h5 {
  134. font-weight: bold;
  135. line-height: 1.25;
  136. margin-top: 1em;
  137. margin-bottom: .5em; }
  138. p {
  139. margin-top: 0;
  140. margin-bottom: 1rem; }
  141. h1 {
  142. font-size: 2rem; }
  143. h2 {
  144. font-size: 1.5rem; }
  145. h3 {
  146. font-size: 1.25rem; }
  147. h4 {
  148. font-size: 1rem; }
  149. h5 {
  150. font-size: .875rem; }
  151. h6 {
  152. font-size: .75rem; }
  153. pre, code {
  154. font-family: inherit;
  155. font-size: inherit; }
  156. header a .path .path:visited {
  157. color: #6699cc; }
  158. header span caret {
  159. color: #f2f0ec; }
  160. footer a {
  161. color: #747369; }
  162. footer a:visited {
  163. color: #747369; }
  164. footer a:active {
  165. color: #747369; }
  166. .page-not-found h1 {
  167. text-align: center;
  168. font-size: 5em; }
  169. .page-not-found h2 {
  170. text-align: center;
  171. font-size: 3em;
  172. color: #a09f93;
  173. margin-bottom: 4rem; }
  174. @media (max-width: 52em) {
  175. .page-not-found h1 {
  176. font-size: 3em; }
  177. .page-not-found h2 {
  178. font-size: 2em; } }
  179. #homepage #about {
  180. font-size: 1.25rem; }
  181. #homepage #about h1 {
  182. margin-top: 1.25rem;
  183. font-size: 2rem;
  184. color: #ffcc66;
  185. text-align: center; }
  186. #homepage #about .me-equation {
  187. margin-top: 3em;
  188. text-align: center;
  189. display: flex;
  190. justify-content: center;
  191. /* align horizontal */
  192. align-items: center;
  193. /* align vertical */ }
  194. #homepage #about .me-equation img {
  195. width: 8em;
  196. border-radius: 2em;
  197. display: inline; }
  198. #homepage #about .me-equation img#gnu {
  199. background-color: #a09f93; }
  200. #homepage #about .me-equation p {
  201. font-size: 4rem;
  202. display: inline;
  203. padding-left: 1rem;
  204. padding-right: 1rem; }
  205. @media (max-width: 600px) {
  206. #homepage #about .me-equation {
  207. margin-top: 2em;
  208. display: block; }
  209. #homepage #about .me-equation p {
  210. display: block;
  211. padding-top: 0.1rem;
  212. padding-bottom: 0.1rem;
  213. margin-bottom: 0rem; } }
  214. @media (max-width: 52em) {
  215. #homepage {
  216. margin-bottom: 2rem; } }
  217. /* .homepage section.categories,
  218. .homepage section.tags {
  219. padding-left: 2rem;
  220. padding-right: 2rem;
  221. }
  222. .homepage .category,
  223. .homepage .category a,
  224. .homepage .tag,
  225. .homepage .tag a {
  226. color: #cc99cc;
  227. }
  228. .homepage .tag {
  229. margin-right: 2em;
  230. } */
  231. h1.site-title {
  232. text-align: center;
  233. /* font-size: 3.5em; */
  234. font-size: 4.8em;
  235. color: #d3d0c8;
  236. margin-top: 0.5em;
  237. margin-bottom: 0.2em; }
  238. @media (max-width: 52em) {
  239. h1.site-title {
  240. font-size: 3em; } }
  241. .hero-logo img {
  242. width: 100%; }
  243. .nav-bar {
  244. margin-left: .5em;
  245. margin-bottom: 1em; }
  246. .hero-tagline {
  247. margin-top: .3em;
  248. font-size: .8rem;
  249. text-align: center; }
  250. .hero-tagline .icon {
  251. width: 1.25rem; }
  252. .article-list h1.list-title {
  253. font-size: 3em;
  254. color: #ffcc66; }
  255. .article-list article {
  256. padding-top: 4rem;
  257. padding-bottom: 4rem;
  258. margin-bottom: 4rem; }
  259. .article-list article h2.headline,
  260. .article-list article h2.headline a {
  261. margin-top: 0;
  262. color: #6699cc; }
  263. .article-list article .meta {
  264. margin-bottom: 1rem; }
  265. .article-list article .meta .key {
  266. color: #747369; }
  267. .article-list article .meta .val,
  268. .article-list article .meta .val a {
  269. color: #cc99cc; }
  270. .article-list article section.summary a {
  271. color: #d27b53; }
  272. article.single .meta {
  273. font-size: 0.9em;
  274. text-align: right; }
  275. article.single .meta .key {
  276. color: #747369; }
  277. article.single .meta .val, article.single .meta .val a {
  278. color: #cc99cc; }
  279. @media (max-width: 52em) {
  280. article.single .meta {
  281. padding-left: 2rem;
  282. padding-right: 2rem; } }
  283. article.single h1.headline {
  284. margin-top: 0;
  285. font-size: 3em;
  286. color: #ffcc66; }
  287. @media (max-width: 52em) {
  288. article.single h1.headline {
  289. padding-left: 2rem;
  290. padding-right: 2rem; } }
  291. article.single section.body {
  292. padding-top: 4rem;
  293. padding-bottom: 3rem; }
  294. @media (max-width: 52em) {
  295. article.single section.body {
  296. padding-top: 2rem;
  297. padding-bottom: 1rem; } }
  298. /* Highlight Colors */
  299. article.single section.body h1 {
  300. color: #6699cc; }
  301. article.single section.body h2 {
  302. color: #99cc99; }
  303. article.single section.body h3 {
  304. color: #f99157; }
  305. article.single section.body h4 {
  306. color: #f2777a; }
  307. article.single section.body h5 {
  308. color: #515151; }
  309. article.single section.body h6 {
  310. color: #747369; }
  311. article.single section.body a, a:visited {
  312. color: #a06700; }
  313. /* Article Elements */
  314. article.single * {
  315. max-width: 100%; }
  316. article.single pre {
  317. margin-top: 0;
  318. margin-bottom: 1rem;
  319. overflow-x: scroll;
  320. border-radius: 3px;
  321. padding: 2rem; }
  322. article.single p code {
  323. padding: 0.2em 0.5em;
  324. border-radius: 3px;
  325. background: #747369;
  326. color: #f2f0ec; }
  327. article.single figure, article.single div.highlight {
  328. box-sizing: border-box;
  329. max-width: 52rem;
  330. width: 52rem;
  331. margin-left: -8rem;
  332. margin-right: -8rem;
  333. margin-bottom: 1rem;
  334. padding: 1em;
  335. background-color: #393939; }
  336. @media (max-width: 52em) {
  337. article.single figure, article.single div.highlight {
  338. width: 100%;
  339. margin-left: 0;
  340. margin-right: 0;
  341. border-radius: 3px; } }
  342. article.single figure img {
  343. max-width: 100%;
  344. width: 100%;
  345. border-radius: 3px; }
  346. article.single figure figcaption {
  347. margin-top: 1rem; }
  348. article.single figure figcaption h4 {
  349. margin-top: 0;
  350. text-align: center;
  351. font-style: italic;
  352. font-weight: normal;
  353. color: #f2f0ec; }
  354. article.single table {
  355. border-collapse: separate;
  356. border-spacing: 0;
  357. max-width: 100%;
  358. width: 100%; }
  359. article.single th,
  360. article.single td {
  361. padding: .25rem 1rem;
  362. line-height: inherit;
  363. border-bottom-width: 1px;
  364. border-bottom-style: solid;
  365. border-bottom-color: #a09f93; }
  366. article.single tr:last-child td {
  367. border-bottom: 0; }
  368. article.single th {
  369. text-align: left;
  370. font-weight: bold;
  371. vertical-align: bottom; }
  372. article.single td {
  373. vertical-align: top; }
  374. article.single blockquote {
  375. margin-left: 2rem;
  376. margin-right: 3rem;
  377. padding-left: 1rem;
  378. border-left: 5px solid #66cccc; }
  379. article.single hr {
  380. border: 0;
  381. border-bottom-style: solid;
  382. border-bottom-width: 1px;
  383. border-bottom-color: #a09f93; }
  384. pre {
  385. background: #2d2d2d;
  386. color: #f2f0ec; }
  387. .highlight .hll {
  388. background-color: #515151; }
  389. .highlight .c {
  390. color: #747369; }
  391. /* Comment */
  392. .highlight .err {
  393. color: #f2777a; }
  394. /* Error */
  395. .highlight .k {
  396. color: #cc99cc; }
  397. /* Keyword */
  398. .highlight .l {
  399. color: #f99157; }
  400. /* Literal */
  401. .highlight .n {
  402. color: #f2f0ec; }
  403. /* Name */
  404. .highlight .o {
  405. color: #66cccc; }
  406. /* Operator */
  407. .highlight .p {
  408. color: #f2f0ec; }
  409. /* Punctuation */
  410. .highlight .cm {
  411. color: #747369; }
  412. /* Comment.Multiline */
  413. .highlight .cp {
  414. color: #747369; }
  415. /* Comment.Preproc */
  416. .highlight .c1 {
  417. color: #747369; }
  418. /* Comment.Single */
  419. .highlight .cs {
  420. color: #747369; }
  421. /* Comment.Special */
  422. .highlight .gd {
  423. color: #f2777a; }
  424. /* Generic.Deleted */
  425. .highlight .ge {
  426. font-style: italic; }
  427. /* Generic.Emph */
  428. .highlight .gh {
  429. color: #f2f0ec;
  430. font-weight: bold; }
  431. /* Generic.Heading */
  432. .highlight .gi {
  433. color: #99cc99; }
  434. /* Generic.Inserted */
  435. .highlight .gp {
  436. color: #747369;
  437. font-weight: bold; }
  438. /* Generic.Prompt */
  439. .highlight .gs {
  440. font-weight: bold; }
  441. /* Generic.Strong */
  442. .highlight .gu {
  443. color: #66cccc;
  444. font-weight: bold; }
  445. /* Generic.Subheading */
  446. .highlight .kc {
  447. color: #cc99cc; }
  448. /* Keyword.Constant */
  449. .highlight .kd {
  450. color: #cc99cc; }
  451. /* Keyword.Declaration */
  452. .highlight .kn {
  453. color: #66cccc; }
  454. /* Keyword.Namespace */
  455. .highlight .kp {
  456. color: #cc99cc; }
  457. /* Keyword.Pseudo */
  458. .highlight .kr {
  459. color: #cc99cc; }
  460. /* Keyword.Reserved */
  461. .highlight .kt {
  462. color: #ffcc66; }
  463. /* Keyword.Type */
  464. .highlight .ld {
  465. color: #99cc99; }
  466. /* Literal.Date */
  467. .highlight .m {
  468. color: #f99157; }
  469. /* Literal.Number */
  470. .highlight .s {
  471. color: #99cc99; }
  472. /* Literal.String */
  473. .highlight .na {
  474. color: #6699cc; }
  475. /* Name.Attribute */
  476. .highlight .nb {
  477. color: #f2f0ec; }
  478. /* Name.Builtin */
  479. .highlight .nc {
  480. color: #ffcc66; }
  481. /* Name.Class */
  482. .highlight .no {
  483. color: #f2777a; }
  484. /* Name.Constant */
  485. .highlight .nd {
  486. color: #66cccc; }
  487. /* Name.Decorator */
  488. .highlight .ni {
  489. color: #f2f0ec; }
  490. /* Name.Entity */
  491. .highlight .ne {
  492. color: #f2777a; }
  493. /* Name.Exception */
  494. .highlight .nf {
  495. color: #6699cc; }
  496. /* Name.Function */
  497. .highlight .nl {
  498. color: #f2f0ec; }
  499. /* Name.Label */
  500. .highlight .nn {
  501. color: #ffcc66; }
  502. /* Name.Namespace */
  503. .highlight .nx {
  504. color: #6699cc; }
  505. /* Name.Other */
  506. .highlight .py {
  507. color: #f2f0ec; }
  508. /* Name.Property */
  509. .highlight .nt {
  510. color: #66cccc; }
  511. /* Name.Tag */
  512. .highlight .nv {
  513. color: #f2777a; }
  514. /* Name.Variable */
  515. .highlight .ow {
  516. color: #66cccc; }
  517. /* Operator.Word */
  518. .highlight .w {
  519. color: #f2f0ec; }
  520. /* Text.Whitespace */
  521. .highlight .mf {
  522. color: #f99157; }
  523. /* Literal.Number.Float */
  524. .highlight .mh {
  525. color: #f99157; }
  526. /* Literal.Number.Hex */
  527. .highlight .mi {
  528. color: #f99157; }
  529. /* Literal.Number.Integer */
  530. .highlight .mo {
  531. color: #f99157; }
  532. /* Literal.Number.Oct */
  533. .highlight .sb {
  534. color: #99cc99; }
  535. /* Literal.String.Backtick */
  536. .highlight .sc {
  537. color: #f2f0ec; }
  538. /* Literal.String.Char */
  539. .highlight .sd {
  540. color: #747369; }
  541. /* Literal.String.Doc */
  542. .highlight .s2 {
  543. color: #99cc99; }
  544. /* Literal.String.Double */
  545. .highlight .se {
  546. color: #f99157; }
  547. /* Literal.String.Escape */
  548. .highlight .sh {
  549. color: #99cc99; }
  550. /* Literal.String.Heredoc */
  551. .highlight .si {
  552. color: #f99157; }
  553. /* Literal.String.Interpol */
  554. .highlight .sx {
  555. color: #99cc99; }
  556. /* Literal.String.Other */
  557. .highlight .sr {
  558. color: #99cc99; }
  559. /* Literal.String.Regex */
  560. .highlight .s1 {
  561. color: #99cc99; }
  562. /* Literal.String.Single */
  563. .highlight .ss {
  564. color: #99cc99; }
  565. /* Literal.String.Symbol */
  566. .highlight .bp {
  567. color: #f2f0ec; }
  568. /* Name.Builtin.Pseudo */
  569. .highlight .vc {
  570. color: #f2777a; }
  571. /* Name.Variable.Class */
  572. .highlight .vg {
  573. color: #f2777a; }
  574. /* Name.Variable.Global */
  575. .highlight .vi {
  576. color: #f2777a; }
  577. /* Name.Variable.Instance */
  578. .highlight .il {
  579. color: #f99157; }
  580. /* Literal.Number.Integer.Long */
  581. /*# sourceMappingURL=style.css.map */