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.

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