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.

712 lines
12 KiB

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