@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local("Source Code Pro"), local("SourceCodePro-Regular"), url(http://7xrcp8.com1.z0.glb.clouddn.com/Source%20Code%20Pro.woff) format("woff"); }

* {
  box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%; }

html {
  font-size: 16px; }

body {
  margin: 0;
  font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  -webkit-font-smoothing: antialiased; }

a {
  text-decoration: none;
  color: inherit; }

/* https://github.com/twitter/twemoji#inline-styles */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.2em; }

.grid {
  display: flex;
  align-items: center; }

.grid-item {
  flex: 1; }

.app-nav {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px; }
  .app-nav a {
    color: #5badf0;
    text-transform: capitalize;
    padding: 6px 10px; }
  .app-nav .active {
    background-color: #5badf0;
    color: #fff; }

.app-header {
  text-align: center; }
  .app-header .banner {
    position: relative;
    overflow: hidden;
    z-index: -1024;
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat; }
    .app-header .banner .placeholder {
      padding-bottom: 33.3%; }
    .app-header .banner img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: opacity 2s linear; }
    .app-header .banner img.loaded {
      opacity: 1; }
    .app-header .banner .banner-small {
      filter: blur(50px);
      -webkit-filter: blur(25px); }
  .app-header .description .avatar {
    width: 100px;
    height: 100px;
    margin-top: -50px;
    border-radius: 50%;
    border: 4px solid #fff; }
  .app-header .description .title {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #222;
    margin: 0;
    padding: 15px; }
  .app-header .description .subtitle {
    margin: 0;
    letter-spacing: 1px;
    font-size: .9rem;
    color: #EB298C;
    padding-bottom: 15px; }
  .app-header .social-list {
    margin: 0;
    margin-top: 15px;
    padding: 0;
    list-style: none; }
  .app-header .social-list a {
    color: #5badf0;
    padding: 8px 12px; }

main.index {
  max-width: 700px;
  margin: 0 auto;
  padding: 15px; }
  main.index article {
    margin-top: 45px; }
  main.index .article-entry {
    padding: 15px 0 30px 0; }
  main.index .article-title {
    margin: 0;
    padding-top: 30px;
    text-transform: capitalize; }
  main.index .article-date {
    color: #aaa; }
  main.index .page-nav {
    text-align: center;
    margin-top: 45px;
    font-size: 1.25rem; }
    main.index .page-nav .page-number {
      padding: 5px;
      color: #5badf0; }
    main.index .page-nav .current {
      color: inherit; }
    main.index .page-nav .extend {
      padding: 0 15px;
      color: #5badf0; }

main.archive {
  max-width: 500px;
  padding: 90px 15px 0 15px;
  margin: 0 auto; }
  main.archive article {
    margin-top: 30px; }
  main.archive .article-title {
    margin: 0;
    font-size: 1.2rem;
    text-transform: capitalize; }
  main.archive .article-meta {
    padding-left: 30px; }
    main.archive .article-meta .article-date {
      color: #aaa; }
  main.archive .page-nav {
    text-align: center;
    margin-top: 90px;
    font-size: 1.25rem; }
    main.archive .page-nav .page-number {
      padding: 5px;
      color: #5badf0; }
    main.archive .page-nav .current {
      color: inherit; }
    main.archive .page-nav .extend {
      padding: 0 15px;
      color: #5badf0; }

main.post {
  max-width: 700px;
  margin: 0 auto;
  padding: 15px; }
  main.post article {
    padding-top: 45px;
    line-height: 1.7; }
  main.post .article-entry {
    margin-top: 75px;
    /* * markdown it -> anchors in config.yml */ }
    main.post .article-entry > h2, main.post .article-entry > h3, main.post .article-entry > h4, main.post .article-entry > h5, main.post .article-entry > h6 {
      margin-bottom: 1rem; }
    main.post .article-entry > h2 {
      margin-top: 3rem; }
    main.post .article-entry > h3 {
      margin-top: 2rem; }
    main.post .article-entry > h4 {
      margin-top: 1.5rem; }
    main.post .article-entry a {
      color: #5badf0; }
    main.post .article-entry a.header-anchor {
      margin-right: .5rem;
      display: none; }
    main.post .article-entry > h2 a.header-anchor {
      display: inline; }
    main.post .article-entry > h3:hover .header-anchor,
    main.post .article-entry > h4:hover .header-anchor,
    main.post .article-entry > h5:hover .header-anchor,
    main.post .article-entry > h6:hover .header-anchor {
      display: inline; }
    main.post .article-entry img {
      max-width: 700px; }
  main.post .article-title {
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    padding-top: 30px; }
  main.post .article-date {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #aaa; }
  main.post .article-comment {
    margin-top: 90px; }

.app-footer {
  height: 80px;
  margin-top: 45px;
  padding: 15px;
  text-align: center;
  color: #666;
  font-size: .9rem; }
  .app-footer p {
    margin: 0;
    padding: 3px;
    font-style: italic; }
  .app-footer a {
    color: #666; }

.page {
  max-width: 700px;
  margin: 0 auto;
  padding: 15px;
  padding-top: 90px;
  line-height: 1.7; }
  .page h1, .page h2 {
    border-bottom: 1px solid #eee;
    margin-top: 2.5rem;
    padding-bottom: .3rem; }
  .page h2 {
    font-size: 1.75rem; }
  .page a {
    color: #5badf0; }
  .page li {
    margin-left: 15px; }

.sharing {
  margin: 90px 0;
  padding: 15px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd; }
  .sharing .profile .avatar {
    padding: 15px;
    width: 70px;
    height: 70px;
    border-radius: 50%; }
  .sharing .profile .title {
    margin: 0;
    font-style: italic;
    font-size: 1rem; }
  .sharing .profile .subtitle {
    margin: 0;
    padding: 5px 0;
    font-size: .8rem;
    font-style: italic;
    color: #999; }
  .sharing .share-btns > p {
    margin: 15px;
    color: #EB298C;
    font-style: italic;
    text-transform: capitalize; }

.code-block, .article-entry pre, .article-entry .highlight {
  background: #2d2d2d;
  margin: 1.6rem 0;
  padding: 3rem 1.8rem;
  border-style: solid;
  border-width: 1px 0;
  overflow: auto;
  color: #ccc;
  line-height: 20px; }

.line-numbers, .article-entry .highlight .gutter pre {
  color: #666;
  font-size: 0.9rem; }

.article-entry pre, .article-entry code {
  font-family: "Source Code Pro", Consolas, Monaco, Menlo, monospace; }

.article-entry code {
  background: rgba(0, 0, 0, 0.07);
  color: #EB298C;
  padding: 2px 3px;
  border-radius: 2px; }

.article-entry pre code {
  background: none;
  text-shadow: none;
  padding: 0; }

.article-entry blockquote {
  color: #aaa;
  margin: 2.5rem 1rem;
  padding: 0 0 0 30px;
  border-left: 4px solid #aaa; }
  .article-entry blockquote p {
    margin: 0; }

.article-entry table {
  margin: 15px 0;
  border-collapse: collapse; }
  .article-entry table tr {
    border-top: 1px solid #ccc;
    background-color: #fff; }
  .article-entry table th, .article-entry table td {
    border: 1px solid #ddd;
    padding: 6px 13px; }

.article-entry .highlight pre {
  border: none;
  margin: 0;
  padding: 0; }

.article-entry .highlight table {
  margin: 0;
  width: auto; }

.article-entry .highlight td {
  border: none;
  padding: 0; }

.article-entry .highlight tr {
  border: 0; }

.article-entry .highlight figcaption {
  font-size: 0.85em;
  color: #999;
  line-height: 1em;
  margin-bottom: 1em; }
  .article-entry .highlight figcaption a {
    float: right; }

.article-entry .highlight .gutter pre {
  text-align: right;
  padding-right: 20px; }

.article-entry .highlight .line {
  height: 20px; }

pre .comment,
pre .title {
  color: #999; }

pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag, pre .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #f2777a; }

pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #f99157; }

pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #99cc99; }

pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #99cc99; }

pre .css .hexcolor {
  color: #66cccc; }

pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #6699cc; }

pre .keyword,
pre .javascript .function {
  color: #cc99cc; }

.back-to-home {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px;
  padding: 8px 12px;
  background-color: #5badf0;
  color: #fff;
  text-align: center;
  font-size: .9rem; }