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.

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