main.css 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. /**
  2. * Reset some basic elements
  3. */
  4. body, h1, h2, h3, h4, h5, h6,
  5. p, blockquote, pre, hr,
  6. dl, dd, ol, ul, figure {
  7. margin: 0;
  8. padding: 0; }
  9. /**
  10. * Basic styling
  11. */
  12. body {
  13. font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  14. color: #111;
  15. background-color: #fdfdfd;
  16. -webkit-text-size-adjust: 100%;
  17. -webkit-font-feature-settings: "kern" 1;
  18. -moz-font-feature-settings: "kern" 1;
  19. -o-font-feature-settings: "kern" 1;
  20. font-feature-settings: "kern" 1;
  21. font-kerning: normal;
  22. display: flex;
  23. min-height: 100vh;
  24. flex-direction: column; }
  25. /**
  26. * Set `margin-bottom` to maintain vertical rhythm
  27. */
  28. h1, h2, h3, h4, h5, h6,
  29. p, blockquote, pre,
  30. ul, ol, dl, figure,
  31. .highlight {
  32. margin-bottom: 15px; }
  33. /**
  34. * `main` element
  35. */
  36. main {
  37. display: block;
  38. /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
  39. /**
  40. * Images
  41. */
  42. img {
  43. max-width: 100%;
  44. vertical-align: middle; }
  45. /**
  46. * Figures
  47. */
  48. figure > img {
  49. display: block; }
  50. figcaption {
  51. font-size: 14px; }
  52. /**
  53. * Lists
  54. */
  55. ul, ol {
  56. margin-left: 30px; }
  57. li > ul,
  58. li > ol {
  59. margin-bottom: 0; }
  60. /**
  61. * Headings
  62. */
  63. h1, h2, h3, h4, h5, h6 {
  64. font-weight: 400; }
  65. /**
  66. * Links
  67. */
  68. a {
  69. color: #2a7ae2;
  70. text-decoration: none; }
  71. a:visited {
  72. color: #1756a9; }
  73. a:hover {
  74. color: #111;
  75. text-decoration: underline; }
  76. .social-media-list a:hover {
  77. text-decoration: none; }
  78. .social-media-list a:hover .username {
  79. text-decoration: underline; }
  80. /**
  81. * Blockquotes
  82. */
  83. blockquote {
  84. color: #828282;
  85. border-left: 4px solid #e8e8e8;
  86. padding-left: 15px;
  87. font-size: 18px;
  88. letter-spacing: -1px;
  89. font-style: italic; }
  90. blockquote > :last-child {
  91. margin-bottom: 0; }
  92. /**
  93. * Code formatting
  94. */
  95. pre,
  96. code {
  97. font-size: 15px;
  98. border: 1px solid #e8e8e8;
  99. border-radius: 3px;
  100. background-color: #eef; }
  101. code {
  102. padding: 1px 5px; }
  103. pre {
  104. padding: 8px 12px;
  105. overflow-x: auto; }
  106. pre > code {
  107. border: 0;
  108. padding-right: 0;
  109. padding-left: 0; }
  110. /**
  111. * Wrapper
  112. */
  113. .wrapper {
  114. max-width: -webkit-calc(800px - (30px * 2));
  115. max-width: calc(800px - (30px * 2));
  116. margin-right: auto;
  117. margin-left: auto;
  118. padding-right: 30px;
  119. padding-left: 30px; }
  120. @media screen and (max-width: 800px) {
  121. .wrapper {
  122. max-width: -webkit-calc(800px - (30px));
  123. max-width: calc(800px - (30px));
  124. padding-right: 15px;
  125. padding-left: 15px; } }
  126. /**
  127. * Clearfix
  128. */
  129. .wrapper:after, .footer-col-wrapper:after {
  130. content: "";
  131. display: table;
  132. clear: both; }
  133. /**
  134. * Icons
  135. */
  136. .svg-icon {
  137. width: 16px;
  138. height: 16px;
  139. display: inline-block;
  140. fill: #828282;
  141. padding-right: 5px;
  142. vertical-align: text-top; }
  143. .social-media-list li + li {
  144. padding-top: 5px; }
  145. /**
  146. * Tables
  147. */
  148. table {
  149. margin-bottom: 30px;
  150. width: 100%;
  151. text-align: left;
  152. color: #3f3f3f;
  153. border-collapse: collapse;
  154. border: 1px solid #e8e8e8; }
  155. table tr:nth-child(even) {
  156. background-color: #f7f7f7; }
  157. table th, table td {
  158. padding: 10px 15px; }
  159. table th {
  160. background-color: #f0f0f0;
  161. border: 1px solid #dedede;
  162. border-bottom-color: #c9c9c9; }
  163. table td {
  164. border: 1px solid #e8e8e8; }
  165. /**
  166. * Site header
  167. */
  168. .site-header {
  169. border-top: 5px solid #424242;
  170. border-bottom: 1px solid #e8e8e8;
  171. min-height: 55.95px;
  172. position: relative; }
  173. .site-title {
  174. font-size: 26px;
  175. font-weight: 300;
  176. line-height: 54px;
  177. letter-spacing: -1px;
  178. margin-bottom: 0;
  179. float: left; }
  180. .site-title, .site-title:visited {
  181. color: #424242; }
  182. .site-nav {
  183. float: right;
  184. line-height: 54px; }
  185. .site-nav .nav-trigger {
  186. display: none; }
  187. .site-nav .menu-icon {
  188. display: none; }
  189. .site-nav .page-link {
  190. color: #111;
  191. line-height: 1.5; }
  192. .site-nav .page-link:not(:last-child) {
  193. margin-right: 20px; }
  194. @media screen and (max-width: 600px) {
  195. .site-nav {
  196. position: absolute;
  197. top: 9px;
  198. right: 15px;
  199. background-color: #fdfdfd;
  200. border: 1px solid #e8e8e8;
  201. border-radius: 5px;
  202. text-align: right; }
  203. .site-nav label[for="nav-trigger"] {
  204. display: block;
  205. float: right;
  206. width: 36px;
  207. height: 36px;
  208. z-index: 2;
  209. cursor: pointer; }
  210. .site-nav .menu-icon {
  211. display: block;
  212. float: right;
  213. width: 36px;
  214. height: 26px;
  215. line-height: 0;
  216. padding-top: 10px;
  217. text-align: center; }
  218. .site-nav .menu-icon > svg {
  219. fill: #424242; }
  220. .site-nav input ~ .trigger {
  221. clear: both;
  222. display: none; }
  223. .site-nav input:checked ~ .trigger {
  224. display: block;
  225. padding-bottom: 5px; }
  226. .site-nav .page-link {
  227. display: block;
  228. padding: 5px 10px;
  229. margin-left: 20px; }
  230. .site-nav .page-link:not(:last-child) {
  231. margin-right: 0; } }
  232. /**
  233. * Site footer
  234. */
  235. .site-footer {
  236. border-top: 1px solid #e8e8e8;
  237. padding: 30px 0; }
  238. .footer-heading {
  239. font-size: 18px;
  240. margin-bottom: 15px; }
  241. .contact-list,
  242. .social-media-list {
  243. list-style: none;
  244. margin-left: 0; }
  245. .footer-col-wrapper {
  246. font-size: 15px;
  247. color: #828282;
  248. margin-left: -15px; }
  249. .footer-col {
  250. float: left;
  251. margin-bottom: 15px;
  252. padding-left: 15px; }
  253. .footer-col-1 {
  254. width: -webkit-calc(35% - (30px / 2));
  255. width: calc(35% - (30px / 2)); }
  256. .footer-col-2 {
  257. width: -webkit-calc(20% - (30px / 2));
  258. width: calc(20% - (30px / 2)); }
  259. .footer-col-3 {
  260. width: -webkit-calc(45% - (30px / 2));
  261. width: calc(45% - (30px / 2)); }
  262. @media screen and (max-width: 800px) {
  263. .footer-col-1,
  264. .footer-col-2 {
  265. width: -webkit-calc(50% - (30px / 2));
  266. width: calc(50% - (30px / 2)); }
  267. .footer-col-3 {
  268. width: -webkit-calc(100% - (30px / 2));
  269. width: calc(100% - (30px / 2)); } }
  270. @media screen and (max-width: 600px) {
  271. .footer-col {
  272. float: none;
  273. width: -webkit-calc(100% - (30px / 2));
  274. width: calc(100% - (30px / 2)); } }
  275. /**
  276. * Page content
  277. */
  278. .page-content {
  279. padding: 30px 0;
  280. flex: 1; }
  281. .page-heading {
  282. font-size: 32px; }
  283. .post-list-heading {
  284. font-size: 28px; }
  285. .post-list {
  286. margin-left: 0;
  287. list-style: none; }
  288. .post-list > li {
  289. margin-bottom: 30px; }
  290. .post-meta {
  291. font-size: 14px;
  292. color: #828282; }
  293. .post-link {
  294. display: block;
  295. font-size: 24px; }
  296. /**
  297. * Posts
  298. */
  299. .post-header {
  300. margin-bottom: 30px; }
  301. .post-title {
  302. font-size: 42px;
  303. letter-spacing: -1px;
  304. line-height: 1; }
  305. @media screen and (max-width: 800px) {
  306. .post-title {
  307. font-size: 36px; } }
  308. .post-content {
  309. margin-bottom: 30px; }
  310. .post-content h2 {
  311. font-size: 32px; }
  312. @media screen and (max-width: 800px) {
  313. .post-content h2 {
  314. font-size: 28px; } }
  315. .post-content h3 {
  316. font-size: 26px; }
  317. @media screen and (max-width: 800px) {
  318. .post-content h3 {
  319. font-size: 22px; } }
  320. .post-content h4 {
  321. font-size: 20px; }
  322. @media screen and (max-width: 800px) {
  323. .post-content h4 {
  324. font-size: 18px; } }
  325. /**
  326. * Syntax highlighting styles
  327. */
  328. .highlight {
  329. background: #fff; }
  330. .highlighter-rouge .highlight {
  331. background: #eef; }
  332. .highlight .c {
  333. color: #998;
  334. font-style: italic; }
  335. .highlight .err {
  336. color: #a61717;
  337. background-color: #e3d2d2; }
  338. .highlight .k {
  339. font-weight: bold; }
  340. .highlight .o {
  341. font-weight: bold; }
  342. .highlight .cm {
  343. color: #998;
  344. font-style: italic; }
  345. .highlight .cp {
  346. color: #999;
  347. font-weight: bold; }
  348. .highlight .c1 {
  349. color: #998;
  350. font-style: italic; }
  351. .highlight .cs {
  352. color: #999;
  353. font-weight: bold;
  354. font-style: italic; }
  355. .highlight .gd {
  356. color: #000;
  357. background-color: #fdd; }
  358. .highlight .gd .x {
  359. color: #000;
  360. background-color: #faa; }
  361. .highlight .ge {
  362. font-style: italic; }
  363. .highlight .gr {
  364. color: #a00; }
  365. .highlight .gh {
  366. color: #999; }
  367. .highlight .gi {
  368. color: #000;
  369. background-color: #dfd; }
  370. .highlight .gi .x {
  371. color: #000;
  372. background-color: #afa; }
  373. .highlight .go {
  374. color: #888; }
  375. .highlight .gp {
  376. color: #555; }
  377. .highlight .gs {
  378. font-weight: bold; }
  379. .highlight .gu {
  380. color: #aaa; }
  381. .highlight .gt {
  382. color: #a00; }
  383. .highlight .kc {
  384. font-weight: bold; }
  385. .highlight .kd {
  386. font-weight: bold; }
  387. .highlight .kp {
  388. font-weight: bold; }
  389. .highlight .kr {
  390. font-weight: bold; }
  391. .highlight .kt {
  392. color: #458;
  393. font-weight: bold; }
  394. .highlight .m {
  395. color: #099; }
  396. .highlight .s {
  397. color: #d14; }
  398. .highlight .na {
  399. color: #008080; }
  400. .highlight .nb {
  401. color: #0086B3; }
  402. .highlight .nc {
  403. color: #458;
  404. font-weight: bold; }
  405. .highlight .no {
  406. color: #008080; }
  407. .highlight .ni {
  408. color: #800080; }
  409. .highlight .ne {
  410. color: #900;
  411. font-weight: bold; }
  412. .highlight .nf {
  413. color: #900;
  414. font-weight: bold; }
  415. .highlight .nn {
  416. color: #555; }
  417. .highlight .nt {
  418. color: #000080; }
  419. .highlight .nv {
  420. color: #008080; }
  421. .highlight .ow {
  422. font-weight: bold; }
  423. .highlight .w {
  424. color: #bbb; }
  425. .highlight .mf {
  426. color: #099; }
  427. .highlight .mh {
  428. color: #099; }
  429. .highlight .mi {
  430. color: #099; }
  431. .highlight .mo {
  432. color: #099; }
  433. .highlight .sb {
  434. color: #d14; }
  435. .highlight .sc {
  436. color: #d14; }
  437. .highlight .sd {
  438. color: #d14; }
  439. .highlight .s2 {
  440. color: #d14; }
  441. .highlight .se {
  442. color: #d14; }
  443. .highlight .sh {
  444. color: #d14; }
  445. .highlight .si {
  446. color: #d14; }
  447. .highlight .sx {
  448. color: #d14; }
  449. .highlight .sr {
  450. color: #009926; }
  451. .highlight .s1 {
  452. color: #d14; }
  453. .highlight .ss {
  454. color: #990073; }
  455. .highlight .bp {
  456. color: #999; }
  457. .highlight .vc {
  458. color: #008080; }
  459. .highlight .vg {
  460. color: #008080; }
  461. .highlight .vi {
  462. color: #008080; }
  463. .highlight .il {
  464. color: #099; }